Close

progress bar style 3

This is another example of a web form with a progress bar, designed using HTML, CSS, and JavaScript. The class progress-bar of the progress class has been added into the code to create and style the progress bar whereas JavaScript functions have been used to implement its animated features. The label of the progress bar has the styles of font size as 18px, font-weight as 700, color as #000, and a margin as 0 0 30px. The bar is given the styles of border-radius as 15px, margin-bottom as 20px, position as relative, and animation of animate-positive 2s. The progress value icon is given an initial set of styles as width and height as 50px, border-radius as 50%, line-height as 40px, background as #fff, border as solid 7px, font size as 15px, font-weight as 600, , and position as absolute. Each icon is assigned a color of its own: #1f75c4, #f7810e, #f2438f, and #08a061 respectively.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.