Course Progress
Course Progress
Renders the logged-in student's progress through the current course. Choose between LifterLMS's own progress bar, a bar styled in Elementor, or a circle/pie chart, and optionally print the progress as a percentage or as completed/total lessons. The widget is Lifter Elements' own (it does not extend Elementor's Progress Bar widget), so every control below is registered by Lifter Elements.
Usage
Course template header — Place the widget near the top of a course template built with Templates > Theme Builder so returning students see how far they are before the Course Outline or Course Syllabus. It works on lesson templates too, where it resolves the lesson's parent course.
Native LifterLMS block with a continue button — Set Output to LifterLMS render and switch on Display continue button to reproduce the progress bar plus "Continue" button LifterLMS prints on its own course pages. For a separately placed and styled button use the Course Continue Button widget instead.
Circle in a sidebar or card — Set Output to Circle with Show progress number? on Percentage for a compact donut or pie that fits a column, a course card or a dashboard.
Number only — If you need just the value (for example inside a heading such as "You are 45% through"), use the Course Progress dynamic tag, which returns the same percentage as text (for example 45%).
How it works
Progress comes from LifterLMS's student record for the course resolved from the current page (a course page, or a lesson's parent course). The percentage is rounded to a whole number; the Steps count is completed lessons over total lessons in the course (for example 3/12).
| Situation | Behaviour |
|---|---|
| Logged-out visitor, or logged-in user not enrolled | LifterLMS reports no progress. With Show for non enrolled user? on Yes (the default) the widget still renders, at 0%: an empty bar or circle, and 0% or 0/12 if a number is shown. Set it to No to render nothing for these visitors. |
| Enrolled student | The bar or circle is filled to the student's percentage; the number, if enabled, shows the percentage or the lesson count. |
| Display continue button on, for a visitor who cannot continue | The button is LifterLMS's own continue button, so it only appears for enrolled students with an incomplete lesson to go to; other visitors get the bar without a button. |
| Outside a course context (a page that is neither a course nor a lesson) | No course can be resolved, so progress is 0% and the widget behaves as for a non-enrolled visitor. |
| In the Elementor editor | When your own progress in the course is 0%, Bar and Circle preview at 50% (and Steps shows half the lessons) so you can style the fill, with an italic notice that the value does not reflect real progress. LifterLMS render previews at 0% and shows a placeholder "Get Started" button when the continue button is on. |
Settings
Content
| Setting | Description |
|---|---|
| Output | How progress is drawn. LifterLMS render outputs LifterLMS's own progress markup, styled by the LifterLMS stylesheet. Bar (default) outputs a horizontal bar styled by this widget. Circle outputs a circular chart drawn with a conic gradient. Most Style controls change with this choice. |
| Circle style | Circle (default) draws a ring with the number in the middle; Pie fills the whole disc. Shown only when Output is Circle. |
| Show progress number? | No (default) draws the bar or circle alone. Percentage prints the rounded percentage (for example 45%). Steps prints completed lessons over total lessons (for example 3/12; LifterLMS render prints it as 3 / 12). |
| Display continue button | On appends LifterLMS's continue button below the bar. Default Off. Shown only when Output is LifterLMS render. |
| Show for non enrolled user? | Yes (default) renders the widget at 0% for visitors who are logged out or not enrolled; No renders nothing for them. See How it works. |
Style — Progress Bar (the section is named Progress Bar for every output)
| Setting | Description |
|---|---|
| Width | Full (default) stretches the bar to its container; Custom reveals Max Width and Alignment. Shown only when Output is Bar. |
| Max Width | Maximum width of the bar or circle, per device, in px, % or vw. Default 480px for LifterLMS render and for Bar with Width set to Custom; 150px for Circle, where it sets the circle's diameter. |
| Alignment | Left, Center (default) or Right placement of the element inside the widget. Shown for Circle, and for Bar when Width is Custom. |
| Height | Thickness of the bar, per device, in px, vh or em. Default 0.4em for LifterLMS render and 20px for Bar. Not shown for Circle. |
| Background Color | Colour of the unfilled track (bar) or of the ring (circle). Default #f1f2f1. |
| Background Color (Inner) | Fill of the disc inside the ring, behind the number. Default white. Shown only for Circle. |
| Color style | Solid uses one colour for the filled part of the circle; Gradient (default) blends Progress Color into Progress Color 2. Shown only for Circle. |
| Progress Color | Colour of the filled part. Default #2295ff for LifterLMS render and Bar; #ff3c00 for Circle. |
| Progress Color 2 | End colour of the gradient. Default #58395b. Shown only for Circle with Color style set to Gradient. |
| Border | Elementor's border group (type, width, colour) around the bar track or the circle. |
| Border Radius | Corner rounding of the track and its fill, per device. Default 30px on all sides. Shown for LifterLMS render and Bar. |
Style — Number (shown only for Bar and Circle)
| Setting | Description |
|---|---|
| Position | Where the number sits relative to the bar: Inline (default, beside the bar), Overlay (on top of the track), Follow Progress (inside the filled part, at its end), Above or Below. Shown only for Bar; in a circle the number is always centred. |
| Alignment | Side the number sits on. With Position set to Inline: Left (default) or Right of the bar. With Above or Below: Left, Center (default) or Right. Not shown for Overlay or Follow Progress. |
| Spacing | Gap between the number and the bar, per device. Default 0.6em. Shown only for Bar with Position other than Overlay or Follow Progress. |
| Typography / Text Shadow / Color | Standard text styling for the number (line height is fixed to the bar height and is not offered). |
Advanced
The Advanced tab holds Elementor's own layout, motion, responsive and custom-CSS controls — see Elementor's documentation. Lifter Elements adds one section, Conditional Logic, which shows or hides this widget by the visitor's LifterLMS status — see the Conditional Logic reference.
Notes
- To hide the widget from non-enrolled visitors you can either switch Show for non enrolled user? to No or use a Conditional Logic enrollment rule on the Advanced tab; the latter also lets you show an alternative element in its place.
- The Circle output loads a small script (
conic-gradient) that draws the gradient on the front end; the inline CSS gradient is only a fallback. - Bar and circle markup carries
le-prefixed classes (le-course-progress-wrapper,le-progress-bar,le-circle-progress); LifterLMS render carries LifterLMS's ownllms-course-progress/llms-progress-barclasses, so theme styles written for LifterLMS apply to it. - Related: Course Continue Button, Course Progress dynamic tag, Course Outline.