Skip to content

Instantly share code, notes, and snippets.

@nim579
Created December 27, 2013 13:25
Show Gist options
  • Save nim579/8146902 to your computer and use it in GitHub Desktop.
Save nim579/8146902 to your computer and use it in GitHub Desktop.
Progress bar stripes on CSS3
.bFormsLoader {
position: relative;
}
@-webkit-keyframes progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
@-moz-keyframes progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
@-ms-keyframes progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
@-o-keyframes progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
@keyframes progress-bar-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
.bFormsLoader:after {
background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 40px 40px;
animation-name: progress-bar-stripes;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: none;
animation-timing-function: linear;
-webkit-animation-name: progress-bar-stripes;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: none;
-webkit-animation-timing-function: linear;
-moz-animation-name: progress-bar-stripes;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: none;
-moz-animation-timing-function: linear;
-ms-animation-name: progress-bar-stripes;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: none;
-ms-animation-timing-function: linear;
bottom: 0;
content: " ";
left: 0;
position: absolute;
top: 0;
transition: width 0.4s ease 0s;
width: 100%;
-webkit-transition-property: width;
-webkit-transition-duration: 0.4s;
-webkit-transition-delay: 0;
-moz-transition-property: width;
-moz-transition-duration: 0.4s;
-moz-transition-delay: 0;
-o-transition-property: width;
-o-transition-duration: 0.4s;
-o-transition-delay: 0;
-ms-transition-property: width;
-ms-transition-duration: 0.4s;
-ms-transition-delay: 0;
transition-property: width;
transition-duration: 0.4s;
transition-delay: 0;
}
.bFormsLoaderDark {
position: relative;
}
.bFormsLoaderDark:after {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 40px 40px;
animation-name: progress-bar-stripes;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: none;
animation-timing-function: linear;
-webkit-animation-name: progress-bar-stripes;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: none;
-webkit-animation-timing-function: linear;
-moz-animation-name: progress-bar-stripes;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: none;
-moz-animation-timing-function: linear;
-ms-animation-name: progress-bar-stripes;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: none;
-ms-animation-timing-function: linear;
bottom: 0;
content: " ";
left: 0;
position: absolute;
top: 0;
transition: width 0.4s ease 0s;
width: 100%;
-webkit-transition-property: width;
-webkit-transition-duration: 0.4s;
-webkit-transition-delay: 0;
-moz-transition-property: width;
-moz-transition-duration: 0.4s;
-moz-transition-delay: 0;
-o-transition-property: width;
-o-transition-duration: 0.4s;
-o-transition-delay: 0;
-ms-transition-property: width;
-ms-transition-duration: 0.4s;
-ms-transition-delay: 0;
transition-property: width;
transition-duration: 0.4s;
transition-delay: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment