Animating progress bars with CSS

Question

So, I have a few different progress bars on this page - http://kaye.at/play/goals

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?

Answer 1

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.

The CSS (you'll need to add the necessary prefixes):

.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%; }
}

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

Answer 2

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>