.progress-line, .progress-line:before {
height: 3px;
width: 100%;
margin: 0;
}
.progress-line {
background-color: #58a700;
display: -webkit-flex;
display: flex;
}
.progress-line:before {
background-color: #2f5400;
content: '';
-webkit-animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation: running-progress 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes running-progress {
0% { margin-left: 0px; margin-right: 100%; }
50% { margin-left: 25%; margin-right: 0%; }
100% { margin-left: 100%; margin-right: 0; }
}
@keyframes running-progress {
0% { margin-left: 0px; margin-right: 100%; }
50% { margin-left: 25%; margin-right: 0%; }
100% { margin-left: 100%; margin-right: 0; }
}
Usage:
<div class="progress-line"></div>
<div class="progress-line"></div>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.