Learn how to create your own custom Progress Bar using HTML, CSS and JavaScript - this is completely vanilla and doesn't require any external libraries like jQuery or jQuery UI.
Using the method described in this video, you are also able to quite easily update the value of the progress bar - this is because we create a new 'ProgressBar' instance for each progress bar, and this then allows us to define a method called 'setUpdate' to change the value dynamically.
For a quick summary, we create the layout of the progress bar using HTML and then make it look nice with CSS. Once the visuals are complete, we wrap the element in a user-defined class called ProgressBar which will be responsible for handling any changes.
You can use this as a UI Component in your next project to give visual feedback to the users of your website, web application or mobile app.
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
