Close

progress bar style 9

This is another example of a web form with a progress bar with arrowheads, designed using HTML and CSS. Class progress-bar of the progress class has been added into the code to create and style the progress bar. The label of the progress bar has the styles of font size as 18px, font weight as 700, color as #205580, bottom as -3px, left as -90px, and a position as absolute. The bar is given the styles of background as #fff, border radius as 15px 0 0 15px, a web kit animation of animate-positive 2s, and an animation value of animate-positive 2s. The progress value number is given an initial set of styles as font size as 18px, font weight as 700, font color as #205580, bottom as -5px, right as -50px, and position as absolute. After the animation, each bar takes a border left style of 20px solid #ff4a98, 20px solid #2c5af9, 20px solid #7cf210, and 20px solid #ff5f25, 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.