44 lines
785 B
CSS
44 lines
785 B
CSS
:host {
|
|
display: inline-block;
|
|
--bar-color: red;
|
|
}
|
|
|
|
.container {
|
|
width: 300px;
|
|
height: 25px;
|
|
background: #ddd;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.valueBar {
|
|
width: 0%;
|
|
height: 100%;
|
|
background-color: var(--bar-color);
|
|
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
rgba(255,255,255,0.3) 25%,
|
|
rgba(255,255,255,0) 25%,
|
|
rgba(255,255,255,0) 50%,
|
|
rgba(255,255,255,0.3) 50%,
|
|
rgba(255,255,255,0.3) 75%,
|
|
rgba(255,255,255,0) 75%,
|
|
rgba(255,255,255,0) 100%
|
|
);
|
|
|
|
background-size: 40px 40px;
|
|
animation: barberpole 1s linear infinite;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.valueBar.complete {
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes barberpole {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 40px 0; }
|
|
}
|