{"id":1401,"date":"2019-01-31T09:42:40","date_gmt":"2019-01-31T09:42:40","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=1401"},"modified":"2025-08-29T13:53:23","modified_gmt":"2025-08-29T13:53:23","slug":"how-to-use-progress-bar-and-circle-progress-widgets","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-use-progress-bar-and-circle-progress-widgets\/","title":{"rendered":"How to Use Progress Bar and Circle Progress Widgets"},"content":{"rendered":"
<\/svg><\/div>
Things to know<\/div>

The Progress Bar<\/strong> and Circle Progress<\/strong> widgets add a single bar or circle diagram to the page. You will have to configure all the settings again for each new bar\/circle diagram. Therefore, to get a multiple-bar or circle diagram, you should customize one and then duplicate it.<\/p><\/div><\/div>\n\n\n\n

Add the Widget to a Page<\/strong><\/h2>\n\n\n\n
\n

Firstly, find the needed widget in the Elementor page builder. Then, drag and drop it into a new section on your web page.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

In this case, we add the Progress Bar <\/strong>widget first.\u00a0<\/p>\n<\/div><\/div>\n\n\n\n

Configure the Progress Bar Settings<\/strong><\/h2>\n\n\n\n
\n

After inserting the widget, the Content > Progress Bar<\/em><\/strong> section tab settings will be opened by default, and a default bar will be displayed.<\/p>\n\n\n\n

These settings allow you to choose the appearance of your progress bar. Here you can customize the following settings:<\/p>\n\n\n\n

\"default<\/a><\/div>\n\n\n\n