Animating progress bars with CSS

Question

I am experimenting with a few different progress bars. Here's my HTML & CSS:

<div class="meter"><span style="width: 100%;"></span></div>


.meter { 
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

I want to simply animate the progress bar so that it slowly goes up from 0% to whatever percentage it's at, rather than just appearing there, but I'd like to do it in the simplest way possible. What's my best option and is it possible with the current code I'm using?

Use animation with @keyframes (for example per 10% for 10 seconds) and use :after so you can draw progress icons in there (like # or •). — user1467267
– user1467267, Commented Apr 11, 2013 at 9:33
Sorry to be a pain, can you give me a HTML/CSS example? I'm a bit of an amateur, just work on my own personal stuff. — user1393984
– user1393984, Commented Apr 11, 2013 at 9:47

izogfif · Accepted Answer · 2024-09-21 05:57:26Z

17

The only way I can think to animate to your width set inline is to add another span, so the HTML ends up as:

<div class="meter">
    <span style="width:80%;"><span class="progress"></span></span>
</div>

That extra span is needed, as we have no way (using just CSS) of checking what the inline style wants the width to be and so animating to it. And unfortunately we can't animate to auto.

Here is a snippet:

.meter { 
    height: 5px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    background-color: #e4c465;
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both; 
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

<div class="meter">
    <span style="width:80%;"><span class="progress"></span></span>
</div>

You can see this in action here. Browsers that don't support CSS animations will just get the bar in its final state.

edited Sep 21, 2024 at 5:57

izogfif

7,9252 gold badges39 silver badges34 bronze badges

answered Apr 11, 2013 at 9:57

CherryFlavourPez

7,5546 gold badges48 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1393984 Over a year ago

Thanks, this is exactly what I ended up doing. (:

CherryFlavourPez Over a year ago

No worries - it's a very nice looking site :)

Muhammad Musavi · Accepted Answer · 2019-11-06 15:34:44Z

9

I developed a progress bar so that it's so light and neat right now and you have percentage value too, I applied CSS transition when the percentage changes from 100% to 7%, just click on the Change button to see how it works. Change transition: width 3s ease; from 3s to whatever fits your need for slower or faster transition.

function change(){
				var selectedValue = document.querySelector("#progress-value").value;
				document.querySelector(".progress-bar-striped > div").textContent = selectedValue + "%";
				document.querySelector(".progress-bar-striped > div").style.width = selectedValue + "%";
			}

.progress-bar-striped {
				overflow: hidden;
				height: 20px;
				margin-bottom: 20px;
				background-color: #f5f5f5;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			}
			.progress-bar-striped > div {
				background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				background-size: 40px 40px;
				float: left;
				width: 0%;
				height: 100%;
				font-size: 12px;
				line-height: 20px;
				color: #ffffff;
				text-align: center;
				-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-webkit-transition: width 3s ease;
				-moz-transition: width 3s ease;
				-o-transition: width 3s ease;
				transition: width 3s ease;
				animation: progress-bar-stripes 2s linear infinite;
				background-color: #288ade;
			}
			.progress-bar-striped p{
				margin: 0;
			}
			
			@keyframes progress-bar-stripes {

				0% {
					background-position: 40px 0;
				}
				100% {
					background-position: 0 0;
				}
			}

<div class="progress-bar-striped">
			<div style="width: 100%;"><b><p>100%</p></b></div>
		</div>
		<div>
			<input id="progress-value" type="number" placeholder="Enter desired percentage" min="0" max="100" value="7" />
			<input type="button" value="Change" onclick="change()"/>
		</div>

edited Nov 6, 2019 at 15:34

answered Sep 30, 2019 at 8:11

Muhammad Musavi

2,7462 gold badges27 silver badges41 bronze badges

2 Comments

paulwithap Over a year ago

This is the better answer. The accepted one will only animate the progress bar if the width is increasing. If you have a situation where a user can go back, you need to animate both directions, which is easily done with transition: width 2s ease and 2 divs.

Ricardo Oct 9 at 0:37

Hi! Thanks for sharing this code. It’s very helpful to me

Damien C · Accepted Answer · 2021-08-31 17:14:43Z

3

Here is a single div proposal on pure css

#progressBar {
    height: 3px;
    position: fixed;
    opacity: 0.5;
    z-index:2;
    background: #DDDDDD;
    overflow: hidden;
    animation: progressBar 1.5s ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode:both;
    bottom:0;
    content:"";
    display:block;
    left:0;
}


@keyframes progressBar {
    0% { left:0;width: 0; }
    50% { left:0;width: 100%; }
    100% {left:100%;width: 0}
}

answered Aug 31, 2021 at 17:14

Damien C

1,1671 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

Animating progress bars with CSS

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related