Can I modify the progress bar?




Is there a way to add a text next to the percentage on the progress bar? I would like to add the word “Complete” next to the percentage. For example, “12% Complete” instead of just “12%”.


Thank you,

IS answered
    IS 2.21K Rep.

    You can do that by adding some CSS.

    Let me start by saying that if you copy and pafte from this forum, you will need to fix all of the single and double quotes. This forum changes straight quotes to left and right quotes which breaks the code.

    On the Style tab, scroll to the bottom and click the link for the HTML/CSS Editor

    Add the following at the bottom of the CSS listed if any:

    @media screen and (min-width:600px){
    .sg-progress-bar {
    width:280px !important;
    .sg-progress-bar-text {
    .sg-progress-bar-text::after {
    content:” Complete”;

    Don’t add this and the following text. This CSS checks to see if the screen is wide enough to display your modified progress bar and if it is, it widens the bar and inserts the text ” Complete” after the percentage.

    IS answered


      Question stats

      • Active
      • Views4420 times
      • Answers1 answer
      • Followers1 follower