16. Progress

The 'Progress' element, part of the Element toolkit, is an incredibly useful tool for displaying progress on your website. Whether you're showcasing project completion, customer satisfaction rates, or company milestones, the ability to customize a progress bar can help engage visitors and highlight your successes.

To add a progress bar, open the 'Add Elements' drawer and drag the 'Progress Element' to your desired location on the page. The options toolbar that appears at the top offers a variety of settings that let you customize the progress bar.

You can adjust the width of the progress bar by clicking, holding, and dragging the handles on the left and right of the toolbar, or by changing the settings to a specific percentage or pixel count. Height adjustments are also possible for a thicker progress bar, though 30 pixels is a suitable standard height for most cases.

Two styles are available, with the second style placing a label at the top of the progress bar. You can also modify the fill color of the bar. If you're not working with percentages and simply want a line, deselect 'Percentage'.

The 'First Style' gives you the option to remove the title or rename it as per your preference. Typography options provide control over text attributes. Colors let you manage the appearance of the bar, title, and background, with options to add a shadow or hover colors.

If your page requires multiple progress bars, you can customize one completely, then select 'Duplicate' to create others. Alter the titles and values as needed to build a section filled with personalized progress bars quickly and efficiently.

Do remember to check how your progress bars appear on different devices, like tablets and mobiles. Ensure the text and other settings are optimized for these formats too. With these simple steps, you can enhance the user experience, showcase progress, and highlight milestones, all while adding a professional touch to your website.