Skip to content

Instantly share code, notes, and snippets.

@coffeesam
Last active October 2, 2019 21:09
Show Gist options
  • Save coffeesam/13a04c7bdf7ba6a61f2a to your computer and use it in GitHub Desktop.
Save coffeesam/13a04c7bdf7ba6a61f2a to your computer and use it in GitHub Desktop.
Bootstrap progress animating stripes for all HTML elements
@-webkit-keyframes u-progress-stripes {
from { background-position: 0 0 }
to { background-position: 40px 0 }
}
@-moz-keyframes u-progress-stripes {
from { background-position: 0 0 }
to { background-position: 40px 0 }
}
@keyframes u-progress-stripes {
from { background-position: 0 0 }
to { background-position: 40px 0 }
}
.u-striped {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-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-image: -moz-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-image: -ms-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-image: -o-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-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);
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
-o-background-size: 40px 40px;
background-size: 40px 40px;
}
.u-striped.u-striped-animated {
-webkit-animation: u-progress-stripes 1s linear infinite;
-moz-animation: u-progress-stripes 1s linear infinite;
animation: u-progress-stripes 1s linear infinite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment