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.
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.
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.
Here’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" tabindex="0" role="button" > 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.