Scroll

MotoCMS 3

MotoCMS eCommerce

MotoCMS Blog

Moto4

Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Widget: Circular Progress Bar

The Circular Progress Bar widget allows you to use a specific, responsive, round progress bar with progress indicators and thereby flexibly configuring the output of content.

mceclip0.png

"Fixed Width" - this feature allows you to set the size of the widget in pixels regardless of the width of the column in which it is located.

mceclip1.png

"Title" - this feature allows you to type the title within the circle of the progress bar.

mceclip2.png

"Position" - this feature allows you to re-position the title within the widget's area.

mceclip3.png

 

"Value" - this feature allows you to set the visible value for the progress bar.

mceclip4.png

"Change the displayed value to" - this feature allows you to set a different visible value for the progress bar, which is not the same as in the original "Value" bar to illustrate the progress.

For example, if you set "Value" in the progress bar as 10% and use 100% for the "Change displayed value to" feature - the value in the center of the widget (where the title is also presented) will be 100%, however, visually the bar will only reach the 10% mark on the circle.

mceclip5.png

 

"Display Unit" - this feature allows you to change the default % unit to any alternative unit.

"Unit Position" - this feature allows you to re-locate the unit's position within the widget's area.

"Spacing Between Text and Numbers" - this feature allows you to create a visual gap between the value and unit.

 

Design

This tab allows you to modify the visual styles of the widget.

mceclip6.png

"Title Text Style", "Progress Text Style" and "Unit Text Style" allow you to change the visual appearance of the typed symbols within the widget's area.

"Bar" - this block allows you to increase/decrease the width of the inner progress bar and change it's color.

mceclip7.png

 

"Progress" - this block allows you to increase/decrease the width of the progress bar and change's it color. You can also enable/disable the round corners for the progress bar here.

mceclip8.png

 

"Bar Animation" block allows you to enable/disable the animation of the progress bar. Also, you can set the speed of the animation of the progress bar via the "Duration" feature.

mceclip9.png

"Value Animation" block allows you to enable/disable the animation of the value. Also, you can set the speed of the animation of the value via the "Duration" feature.

mceclip10.png

 

This widget belongs to the More widget category. Check out the other widgets in this category at the following link: Google Map, Google Map Pro, Google Calendar, MailChimp, Disqus, Countdown Timer, Counter, Accordion, Tabs, Popup, Progress Bar, Scroll To, Slideshare, PayPal button, Breadcrumbs, iFrame, Embed, Google Search and Google Search Results.

Have more questions? Submit a request

Comments