CSS — Progress bar 4

: The Progress Indicator element

The HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Try it

Content categories	Flow content, phrasing content, labelable content, palpable content.
Permitted content	Phrasing content, but there must be no element among its descendants.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	progressbar
Permitted ARIA roles	No role permitted
DOM interface	HTMLProgressElement

Attributes

This element includes the global attributes.

This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1 .

This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max , or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

Note: The :indeterminate pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeAttribute(‘value’) .

Examples

progress value="70" max="100">70 %progress> 

Источник

10 Different CSS Progress Bar

CSS Progress bar is used to show the progress of some ongoing task. They are used on websites to show the progress of a download, upload, or some other process like a game level, etc.

It creates a visual cue for the user that something is happening in the background and keeps them engaged.

Adding a progress bar to your website or projects will improve the user experience and make your website more interactive.

You can use all progress bars discussed in this article in your projects for free.🥳

1. Simple Progress Bar

To start with let’s choose the simplest progress bar. It is a simple horizontal bar with a colored background.

Create a element and add a class progress to it.

Set the width of the progress bar to 40% (you can change it to any value you want).

Now style it to look like a progress bar. Set its height to 20px, and add some background color and border radius.

2. CSS Progress Bar with Background

The above progress bar doesn’t look that great, since we made it very simple. Let’s add some background to it and make it look more attractive.

To add a nice background behind the progress bar we need to change both CSS and HTML.

First nest above inside another and add a class progress-container to it. We will add background to this element.

Now add some background color to the progress-container and set its height the same as the progress bar. (Setting height is optional, but it will make the progress bar look more attractive).

Also, add some border radius to the progress-container to make it look more rounded.

.progress-container < height: 20px; background-color: #ddd; border-radius: 10px; >.progress

3. CSS Progress Bar with Text

When you look at both of the above progress bars you will feel like something is missing🤔. And when you look at it closely🧐 you will realize that it is the progress percentage.

Progress percentage gives us an instant idea of the progress and it’s must to have one in your progress bar.

To create a progress bar with text we are going to have the same HTML code as above but we will add some text inside the progress element.

In styling, we can add some text color, font size, and alignment to make it look beautiful.

.progress-container < height: 20px; background-color: #ddd; border-radius: 10px; >.progress

4. CSS Progress Bar Animation

Now that we have a progress bar with text, let’s add some animation to it.

For animation, we will use CSS3 Animation. We will add a transition property to the width property of the progress element.

There is little change in HTML and CSS code. In HTML add data-progress attribute to the progress element and set its value to the progress percentage. In CSS add the transition property to the width property.

Finally, apply JavaScript to the progress element to set its width to the value of data-progress attribute.

Here is the complete code.

     .progress-container < height: 20px; background-color: #ddd; border-radius: 10px; >.progress 
Progress bar with nice animation using HTML, CSS and JavaScript
 
Click on the progress bar to see the animation
 
0%
 

     .progress-container < height: 20px; background-color: #ddd; border-radius: 10px; >.progress < height: 20px; border-radius: 10px; background-color: #4CAF50; color: white; font-weight: bold; text-align: center; transition: all 1s ease; width: 0; >.next < background-color: #6980e4; border: none; border-radius: 0.25rem; color: white; padding: 10px 25px; display: block; font-size: 16px; margin: 10px auto; cursor: pointer; >.next:hover 
Progress bar with multiple steps
 
Click on the next button to see the animation
 
0%