How to Add A Styled Progress Percentage To Motivate Participants (Advanced)

This tutorial shows you how to set up your course dashboard page to include progress percentage alongside the course icon. This helps your membership site subscribers to see at a glance where they left off in a course before clicking deeper.


Video Tutorial

HTML code used to show icon and progress

[accessally_icon post_id=”123″ width=”127″ height=”127″ text=”30 Day List Building Challenge”]

[progressally_progress_text post_id=”123″]

Styling code used in the tutorial video

.program-badge {
.progress-text {
margin: 0;
position: absolute;
bottom: 0;
right: 0;
line-height: 40px;
font-size: 15px;
border: 2px solid #b2bf00;
border-radius: 30px;
width: 40px;
height: 40px;
text-align: center;
background-color: #00A4B3;
color: white;
Updated on January 2, 2018

Related Articles