CSS Only Loading Bar

(where progress is unknown)

by Ian Field-Richards © 2014 - FREE TO USE

Tweak itHide Tweaks Get the codeHide the code

Bar Height

Background Speed

Bounce Speed

Stripes Off Stripes On

Surround Off Surround On

Fancy Styling Flat Styling

			<!-- html -->
<div class="bar">
<div class="stripes"></div>
<div class="innerBar"></div>
</div>

			

			/* css */
.bar {
width: 350px;
height: 25px;
border-radius: 20px;
display: inline-block;
overflow: hidden;
position: relative;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #45484d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#45484d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000000 0%,#45484d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000000 0%,#45484d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000000 0%,#45484d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #000000 0%,#45484d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 0 rgba(255,255,255,.35), 0 0 0 10px rgba(0,0,0,.1);
background: rgba(0,0,0,0.3);
}
.stripes {
width: 100%; 
height: 100%;
background: -webkit-linear-gradient(45deg, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%,  rgba(255,255,255,.1) 75%);
background: -moz-linear-gradient(-45deg, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%,  rgba(255,255,255,.1) 75%);
background: -ms-linear-gradient(-45deg, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%,  rgba(255,255,255,.1) 75%);
background: -o-linear-gradient(-45deg, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%,  rgba(255,255,255,.1) 75%);
background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,.1) 25%, rgba(255,255,255,.1) 50%, transparent 50%, transparent 75%,  rgba(255,255,255,.1) 75%);
background-size: 30px 30px;
}
.innerBar {	
height: 100%;
border-radius: 20px;
position: absolute;
top: 0;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: #e04158 !important;
}
/* set animation */
@-webkit-keyframes bounceBar {
 0%	{ width: 200px; left: -180px; }  
 50%	{  width: 200px; left: 330px; }  
 100%	{ width: 200px; left: -180px; }
}
@-moz-keyframes bounceBar {
 0%	{ width: 200px; left: -180px; }  
 50%	{  width: 200px; left: 330px; }  
100%	{ width: 200px; left: -180px; }
}
@-o-keyframes bounceBar {
0%	{ width: 200px; left: -180px; }  
50%	{  width: 200px; left: 330px; }  
100%	{ width: 200px; left: -180px; }
}
@keyframes bounceBar {
0%	{ width: 200px; left: -180px; } 
50%	{  width: 200px; left: 330px; } 
100%	{ width: 200px; left: -180px; }
}
@-webkit-keyframes stripesPan {
0%	{  background-position: 0 0; } 
100%	{  background-position: 0 30px; }
}
@-moz-keyframes stripesPan {
0%	{  background-position: 0 0; } 
100%	{  background-position: 0 30px; }
}
@-o-keyframes stripesPan {
0%	{  background-position: 0 0; } 
100%	{  background-position: 0 30px; }
}
@keyframes stripesPan {
0%	{  background-position: 0 0; } 
100%	{  background-position: 0 30px; }
}
/* call animation */
.innerBar {
-webkit-animation:  bounceBar 1.5s infinite cubic-bezier(0.645, 0.045, 0.355, 1) ; /* Safari 4+ */
-moz-animation:    bounceBar 1.5s infinite cubic-bezier(0.645, 0.045, 0.355, 1) ; /* Fx 5+ */
-o-animation:      bounceBar 1.5s infinite cubic-bezier(0.645, 0.045, 0.355, 1) ; /* Opera 12+ */
animation:         bounceBar 1.5s infinite cubic-bezier(0.645, 0.045, 0.355, 1) ; /* IE 10+ */
}
.stripes {
-webkit-animation:  stripesPan .5s infinite linear ; /* Safari 4+ */
-moz-animation:    stripesPan .5s infinite linear ;  /* Fx 5+ */
-o-animation:      stripesPan .5s infinite linear ;  /* Opera 12+ */
animation:         stripesPan .5s infinite linear ;  /* IE 10+ */
}

		