Skip to content

Instantly share code, notes, and snippets.

@taykcrane
Created April 15, 2015 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taykcrane/bbf13fe4ce9589381f6c to your computer and use it in GitHub Desktop.
Save taykcrane/bbf13fe4ce9589381f6c to your computer and use it in GitHub Desktop.
Progress bar animation
<style>
#loadingProgressG{
width:64px;
height:5px;
overflow:hidden;
background-color:#EBEBEB;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
}
.loadingProgressG{
background-color:#4A8EE1;
margin-top:0;
margin-left:-64px;
-moz-animation-name:bounce_loadingProgressG;
-moz-animation-duration:2.7s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:bounce_loadingProgressG;
-webkit-animation-duration:2.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:bounce_loadingProgressG;
-ms-animation-duration:2.7s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:bounce_loadingProgressG;
-o-animation-duration:2.7s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:bounce_loadingProgressG;
animation-duration:2.7s;
animation-iteration-count:infinite;
animation-timing-function:linear;
width:64px;
height:5px;
}
@-moz-keyframes bounce_loadingProgressG{
0%{
margin-left:-64px;
}
100%{
margin-left:64px;
}
}
@-webkit-keyframes bounce_loadingProgressG{
0%{
margin-left:-64px;
}
100%{
margin-left:64px;
}
}
@-ms-keyframes bounce_loadingProgressG{
0%{
margin-left:-64px;
}
100%{
margin-left:64px;
}
}
@-o-keyframes bounce_loadingProgressG{
0%{
margin-left:-64px;
}
100%{
margin-left:64px;
}
}
@keyframes bounce_loadingProgressG{
0%{
margin-left:-64px;
}
100%{
margin-left:64px;
}
}
</style>
<div id="loadingProgressG">
<div id="loadingProgressG_1" class="loadingProgressG">
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment