A progress bar can be used to show a user how far along he/she is in a process. The guideline below about the Advanced Progress Bar widget will get you to walk in the right way to use the widget developed by Element Pack.
Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.) you want to work with and style as well.
Content Tab
The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).
Progress Bars
After dragging and dropping widgets in a new section, you will get a list group. The list is not limited, you can add a new list in the list group just by clicking on the ADD ITEM button.
You can edit every single list item. Simply, hit on the List Item and edit the field provided by the List Item, and set Name, Level, Text, Level, and Base Color included by the list item.
If you have to get the same designed content, you’ll be able to duplicate clicking on the duplicate icon and delete clicking on the delete icon.
One more thing, if you want an individual bar to design, you can do that by just editing every single bar under Progress Bar option. So, simply go Content Tab > Progress Bars.
N.B:
On the contrary, if you want global design (the same design) for every single bar, you need to go to Style > Progress Bars.
Moreover, in the Progress Bars section, you’ll be able to determine the text position Text Outside Top, Text Inside, Text Outside Bottom. As you see in the demonstration above.
Style Tab
Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design.
Progress Bars
If you want to set height, space, border-radius, box-shadow, and padding for every single bar, you need to go to Style > Progress Bars.
Content
From this section here, you’ll be able to design the bars globally, especially text, level, and base color with typography and text Shadow. Just go to Style Tab > Content.
Importantly, for having a global design to bar, you’ve to remove the text, level, and base color of the individual bar from the Progress Bars under the Content tab.
Video Tutorial
For more details, see the video above.
