Skip to content

Instantly share code, notes, and snippets.

@lccxx

lccxx/progressbar.html

Created March 15, 2012 08:54
Show Gist options
  • Save lccxx/2043050 to your computer and use it in GitHub Desktop.
Save lccxx/2043050 to your computer and use it in GitHub Desktop.
Download ZIP
css3 animation progressbar
Raw
progressbar.html
<!DOCTYPE html>
<html>
<style>
div.progressbar {
background-color: #6188F5; background-repeat: repeat-x;
background-position: 0 0; background-size: 16px 9px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,
rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, transparent 66%,
transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,
rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, transparent 66%,
transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,
rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, transparent 66%,
transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,
rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, transparent 66%,
transparent);
animation-name: pb;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-moz-animation-name: pb;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: pb;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes pb {
from { background-position: 0px 0; }
to { background-position: -160px 0; }
}
@-moz-keyframes pb {
from { background-position: 0px 0; }
to { background-position: -160px 0; }
}
@-webkit-keyframes pb {
from { background-position: 0px 0; }
to { background-position: -160px 0; }
}
</style>
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div class="progressbar" style="height:9px;"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment