#MoodleTips – Add radial course progress in your #Moodle course using this CSS code

May 3rd, 2016

Moodle Forums are a great way of sharing information and tips with other fellow Moodle users.  Jerome Di Pietro has shared his work on Moodle forums about adding a radial course progress indicator in your Moodle course with the help of CSS and Javascript.

Radial Course Progress in Moodle course using CSS and JavaScript

Radial Course Progress in Moodle

The suggestion posted by Jerome is very useful as it doesn’t need any plugin to be installed on your Moodle site. it simply uses jQuery to count the number of Completion tickboxes. Obviously, for this code to work in your Moodle course, you need to enable the completion progress setting on under your course settings.

I had tested the code on my Moodle 2.9 development server and the code is simply amazing and worked like a charm without any changes. You can also add the simple radial course progress bar by adding an HTML block on your course page and then adding the code mentioned in this forum thread in the block content.

Do let us know if you are also amazed with the simplicity of the code and the benefits it provides without any hassle? If you also wants to share such tips and tricks, then you can send us directly through this form.

Reference: https://moodle.org/mod/forum/discuss.php?d=314373#p1319920