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.

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" decoding="async" loading="lazy" class="size-full wp-image-450 sp-no-webp">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" decoding="async" loading="lazy" class="size-full wp-image-450 sp-no-webp" alt="LearnDash progress bar with steps shown" height="120" width="536" srcset="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png 536w, https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png 300w" sizes="(max-width: 536px) 100vw, 536px">

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