Сообщение от Gozar
|
добавляем забор(в полосу можно дописать"обработка"),
|
Ты про это чтоль?
<style>
#bar {
position: absolute;
top: 0;
left: 0;
height: 4px;
background: red;
box-sizing: border-box;
-webkit-box-shadow: 1px 1px 6px 0px #333;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
overflow: hidden;
}
#bar:before {
content: ' ';
display: block;
position: absolute;
width: 50px;
height: 100%;
animation: trololo 2s linear infinite;
background: linear-gradient(45deg, red 15%, white 50%, red 85%);
margin-left: -25px;
}
@keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>