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.