Removing progress indicators in Rise

Hi Celia, to remove all progress indicators you have to edit the file "main.bundle.css". It is in the "lib" folder of the published html output. You need to add the following script to the very beginning of the file:

.organic .nav-sidebar-header__progress-text {

display: none;

}

.organic .nav-sidebar-header__progress-track {

display: none;

}

.organic .progress-circle.progress-circle--sidebar {

display: none;

}

It worked well for me, I hope it works for you too.

Best regards

Barbara

The following code currently works for me and will remove/hide all progress icons/circles and bars/meters from the side menu AND the cover page. (Barbara's code only removes the side menu icons and progress meters.)

.organic .nav-sidebar-header__progress-text {
display: none;
}

.organic .nav-sidebar-header__progress-track {
display: none;
}

.organic .progress-circle.progress-circle {
display: none;
}

Hope this helps! 

thank you for the addition @Pano.

However, I noticed that in our LMS, tracking based on the course completion no longer works when the code is adjusted like this (regardless of whether mine or the Pano's code was used). Has anyone noticed this as well?

With the main.bundle.css no longer in the published output does anyone have a method to make this work?

Thanks

Tim

The previously suggested workaround no longer works due to a recent update in Rise that changed the original CSS file.

However, I have found another solution! As of Aug. 19, 2023, here is how to remove all progress indicators from a Rise course. Please note, this process will work until Articulate pushes another update in the future that could again change the file structure and/or the key css or js files that are used for generating the progress indicators in Rise. Also, this code only works when the default Sidebar navigation is used. So it won't work with Compact or Overlay navigation. 

1) From your published output, go to the "content" folder if published for web (or the "scormcontent" folder if published for LMS).

2) Go to the "lib" folder and locate the "rise" subfolder. All the files within it will be identified by the same names for every project. (I'm not sure why Articulate went with a cryptic naming convention, but I wouldn't be surprised if these file names change in the future.)

3) Within the folder, select the larger CSS file (not a JS file). For example, my larger CSS file is 629KB in size, while the smaller one is 55KB in size. The larger one is normally the second CSS file shown in the folder and the file name may start with a letter.

4) Once you open the larger CSS file, it should appear in Notepad or a similar simple text editor. Paste the following code at the very top of the page:

.nav-sidebar-header__progress-text,
.nav-sidebar-header__progress-track,
.progress-circle.progress-circle{
display: none;
}

The end result should look like this:

5) Save the file and test the course to make sure it now runs without any progress indicators.

That's it!

Thank you for this update.  It worked well in my project.

I have another project where we are using both French and English in the same file and the student can do either language.  That means that completion is 50% rather than 100%.  I am not concerned about the LMS completion as I am using a SL block for that but does anyone have any ideas for dividing the completion number in half when it is displayed?

Thanks

Tim

Pano, your code seems to work for me for the main page, I no longer see progress icons there. but in the menu, I still see progress under the heading (% complete). Any workaround for that?

This will do the trick to hide all progress icons (on cover page and in menu), and you can add this to the index.html file inside the existing style tag like so-

.lesson-progress.lesson-progress--sidebar,
.lesson-progress.lesson-progress--cover,
.nav-sidebar-header__progress-text{
display: none;
}

/* edited to include hiding 'progress text'