Skip to content

Instantly share code, notes, and snippets.

@kejun
Created July 28, 2013 08:47
Show Gist options
  • Save kejun/6097994 to your computer and use it in GitHub Desktop.
Save kejun/6097994 to your computer and use it in GitHub Desktop.
Untitled
.progress {
position: relative;
height: 20px;
border:1px solid #333;
}
.progress i {
position: absolute;
width: 50%;
height: 20px;
top: 0;
left: 0;
background-color: #03a;
background-image:
linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
background-size: 50px 50px;
animation: progress_move 2s linear infinite;
}
@keyframes progress_move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<div class="progress">
<i></i>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment