This is another example of a web form with a progress bar with the progress value shown above the bar, 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 padding as 3px 10px, font size as 14px, font weight as 700, color as #282828, line height as 22px, letter spacing as 1px, text align as center, and text transform as uppercase to automatically transform it to uppercase, background color as #fff, and box shadow as 0 0 8px 2px rgba(0, 0, 0, 0.14). The progress line is given a color of #fff, height as 6px, margin top as 70px, and an overflow as visible whereas the bar is given the styles of border radius as 5px, and an animation of animate-positive 2s, The progress value number is given an initial set of styles as width as 50px, height as 25px, font size as 14px, line height as 25px, font color as #fff, border radius as 4px and a font weight of 600. . Each progress value number is given a background color of #ff007f, #73cd21, #2e9ce0, and #eea921, respectively
This is another template of a web form with a progress bar, 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 body is given a background color of #dad9d4. The label of the progress bar has the styles of font size as 15px, background color as #fff, width as 20%, height as 100%, border radius as 100px 0 0 100px, font color as #000, line height as 40px, letter spacing as 1px, text align as center, and text transform as uppercase to automatically transform it to uppercase. The progress line is given a color of #fff, border radius of 100px, and margin top as 40px whereas the bar is given the styles of border radius as 0 100px 100px 0, font size as 15px, font weight as bold, line height as 40px, text color as #fff, and an animation value of animate-positive 2s. Each progress value number is given a background color of #ec4251, #73cd21, #2e9ce0, and #eea921, respectively.
This is another example of a web form with a progress bar with the progress value shown below the bar, 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 body is given a background color of #2c304a. The label of the progress bar has the styles of font size as 18px, font weight as 700, color as #fff, and margin as 0 0 20px. The progress line is given a color of #171b3c, border radius of 20px, border of 1px solid #000, box shadow of 0 2px 2px #4f4c4c, margin bottom as 40px, and an overflow as visible whereas the bar is given the styles of border radius as 20px, a border as 1px solid #000, 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 15px, line height as 25px, width as 6px, height as 25px, background color as #171b3c, font color as #fff, border radius as 0 0 15px 15px, and a box shadow as 0 2px 2px #4f4c4c.
This is another example of a web form with a progress bar with dotted lines, designed with HTML and CSS. The 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 #000, letter-spacing as 2px, margin as 0 0 30px, and text-transform as uppercase to automatically transform it to uppercase. The progress line is given a color of #000, and an overflow as visible whereas the bar is given the styles of background as #fff, border-top width as 10px, border style as dotted, 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 #000, top as -32px, right as -5px, and position as absolute.