Progress Bar
The LearnDash progress bar is shown in several places throughout the learning experience. It’s used to show overall course progress, lesson progress (when topics are used), and group progress (to indicate percentage of group courses completed). Our plugin will also apply styles to several other progress bars used by some third-party plugins.
Here’s a list of all the places our plugin’s progress bar styles will be applied.
LearnDash Progress Bars
- Course progress bar at the top of course pages
- Course progress bar in the header of focus mode pages
- Anywhere the “Course Progress Bar” widget is used
- Course progress bar in the LearnDash Course Grid
[ld_course_list] - Group progress bar at the top of group pages
- Course progress bar in the “Group Courses” list on group pages
- Group progress bar in the LearnDash Course Grid
[ld_group_list] - Course progress bar in the LearnDash Profile
[ld_profile]
Third-Party Plugin Progress Bars
- Course progress bar in the Uncanny Toolkit Enhanced Course Grid
[uo_courses] - Course progress bar in the Uncanny Toolkit Course Dashboard
[uo_dashboard]
Progress Bar Styles
- Progress Bar Style: “Default” will display a solid color bar. “Striped” will place partially transparent, diagonal white stripes over top the custom color you choose.
- Progress Bar Container: This determines the color of the container that holds the progress bar
- Progress Bar: This determines the fill color of the actual progress bar. Default is
#019e7c. - Border Radius: This determines the roundness of the corners of the progress bar, in pixels. Leave blank to use the default
7px. - Height: This determines the height of the progress bar, in pixels. Leave blank to use the default
7px. - Animate: Enabling this option will add a slight animation to the bar every time the page loads. The bar will move from left to right (or right to left for RTL languages).
- Hide “% Complete”: Enabling this option will hide the “% Complete” text displayed alongside the progress bar
- Hide “X/Y Steps”: Enabling this option will hide the “X/Y Steps” text displayed alongside the progress bar
NOTE
The progress bar in the header of focus mode is limited to 14px. If you set a higher value, 14px will be used in this location because of limited vertical space.