Scroll

MotoCMS 3

MotoCMS eCommerce

MotoCMS Blog

Moto4

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

Start Chat

Widget: Progress Bar

This widget can be used for showing a particular milestone on your website as lines (bars) that stretch until the final width is reached.

mceclip0.png

"Progress Bar" widget is separated into two tabs: "Settings" and "Design".

mceclip1.png

The "Settings" tab consists of the following blocks: "Items", "Display", "Animation".

mceclip2.png

The "Items" block allows you to create a new item with the "Add" button.

mceclip3.png

"Add Item" window consists of the following features: "Title", "Progress Value", "Change the displayed value to", "Background", "Progress Bar", "Border Color".

mceclip4.png

"Title" - this field contains the name of your "Progress Bar" item.

mceclip5.png

"Progress Value" allows displaying the final digit from 0% to 100%.

mceclip6.png

"Change the displayed value to" feature allows adding a custom text title instead of percent value at the end of your progress bar for the final progress result.

mceclip7.png"Background" feature allows changing the color of incomplete progress.

mceclip8.png

"Progress Bar" feature allows changing the color of complete progress.

mceclip9.png

"Border Color" allows you to change the color of the "Progress Bar" border.

mceclip10.png

 

Once you created an item, you can edit/remove it.

mceclip11.png

You can change the position of items by dragging them while 6 dots are clicked.

mceclip12.png

The "Display" block has the following common features"Spacing""Visible On".

mceclip13.png

"Animation" - is a general setting of each widget.

mceclip14.png

 

"Design" tab allows you to customize "Progress Bar" appearance. It consists of the following features: "Title Text Style", "Progress Text Style", "Bar Height", "Corners", "Progress Bar Corners", "Enable Bar Animation".

mceclip15.png

"Title Text Style" feature allows you to change the title appearance by selecting any present text style.

mceclip16.png

"Progress Text Style"feature allows you to change the title appearance at the end of your progress bar by selecting any present text style.

mceclip17.png

"Bar Height" feature allows customizing the bar's height appearance from 1px to 50px.

mceclip18.png

"Border Width" this feature allows you to set the width of the widget borders from 1px to 20px.

mceclip22.png

"Corners" - this feature allows you to round the left and right corner of the "Progress Bar" widget from 1px to 25px. Default value is set as 0px. In order to increase/decrease the corner's value, you can set the value manually by adjusting the scale with your left mouse button. After adjusting it, you can also slightly increase/decrease the scale by using the keyboard arrow buttons.

mceclip19.png

"Progress Bar Corners" - this feature allows you to round the progress bar's second corner. If selected, it works together with the "Corners" feature.

mceclip20.png

"Enable Bar Animation" feature allows making your progress bar dynamic instead of static.

mceclip21.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, Circular Progress Bar, Scroll To, Slideshare, PayPal button, Breadcrumbs, iFrame, Embed, Google Search and Google Search Results.

Have more questions? Submit a request

Comments