Progress

The progress element is excellent for displaying progress. Let's bring in by going to the add elements drawer and then click hold on the progress element and drop it anywhere you want it on the page. To interact with it, click on it and you get the options toolbar at the top. Note the handles on the left and the right, and you can just click and hold and drag that and easily change the width of the progress bar. This can also be done under settings. The width can be set to percentage or within pixels. From here, you have the option to increase the height if you need a little bit thicker. Otherwise, 30 is a good place to leave it in terms of pixels. The normal styling and effects options are also available. All the way to the left, we find the options, and we've got two styles to work with here. The second style puts the label at the top where the mark is, and you can change the fill over here. If you're not working with percentage and you just want to have the fill, you can deselect percentage, and then you just have the line.

This would be better to put it back to the first style. Within the first style, you also have the option to remove the title. Changing the name of the title is as simple as selecting all and putting in my own title. You can change your topography, and then colors will give you a control over the bar, the title, the background, and you can add a shadow. And in addition, you can add hover colors if you need it. Most cases, you're not going to use only one of these, but you're probably going to use a number of progress bars under each other. Style out one completely the way you would like it. And then from here, select Duplicate to bring in the others. Change out the titles, change out the values, and you have a nice little progress bar section in no time. Remember to go have a look on your tablet and mobile responsive views to make sure it still works properly or where you need to make changes in terms of text and other settings.