LearnDash Design & Tutorials

LearnDash Design & Tutorials

Tag: Progress Bar

How to Show Percentage (%) Complete in the LearnDash Progress Bar

By default, the LearnDash progress bar only displays a colored bar to indicate a student’s progress in the course. There is no text-based example of what percentage they have completed.

LearnDash progress bar with percentage complete

Sweet lookin’ bar, man! How’d you do that? With this →

I’ve previously covered how to show “X out of Y steps completed” beneath the progress bar, but if you are trying to display a percentage instead, this article is for you.

Show “X out of Y steps completed” under the LearnDash Progress Bar

The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.

LearnDash progress bar with steps shownHere’s how I did it.

" data-medium-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png" data-large-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png" decoding="async" loading="lazy" >

Like the stripes? 😍 Here’s how I did it.

In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.

Powered by WordPress & Theme by Anders Norén