Create your own Progress Bar in HTML, CSS & JavaScript Classes | Intermediate Tutorial
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!
On this page of the site you can watch the video online Create your own Progress Bar in HTML, CSS & JavaScript Classes | Intermediate Tutorial with a duration of hours minute second in good quality, which was uploaded by the user dcode 04 April 2018, share the link with friends and acquaintances, this video has already been watched 19,396 times on youtube and it was liked by 395 viewers. Enjoy your viewing!
