SiteOrigin Radial Widget
The SiteOrigin Radial widget provides a simple solution for displaying process and step based data. The radial can be statics, rotated, animated and filled to a defined percent.
Radial Titles
Radials should be given a Title and a suitable Title Size in the Data Section of the widget form.
Design
Interface
Filling the Track
The Percent option is used to determine the amount the line fills the track of the radial.
20 Percent
40 Percent
60 Percent
Rotating the Line
By default the track is lined from the right of the radial this behaviour can be adjusted with the Rotation option.
-90 Rotation
0 Rotation
90 Rotation
Track & Line Color
For easier theme integration the color of the track and line can be set independently using the color option of forms Data Section.
-90 Rotation
0 Rotation
90 Rotation
Line Width
The thickness or width of the line and track can be adjusted with the Width option.
Width of 3
Width of 6
Width of 9
Line Capping
The way the ends of the line are rendered can be adjusted using Line Cap option. Lines can be capped with either round or flat based capping.
Round Cap
Square Cap
Butt Cap
Animated Lines
The radial lines can be animated as the page scrolls using scrollspy. To animate the lines set the Animate option to Yes and supply a Trigger Distance. The trigger distance is how in view the radial needs to be before it is animated.
Design
Revise
Deploy
Radial Icons
Radials can be displayed with icons using the Icon Template and setting an Icon and Icon Color.