amis2/scss/components/_progress.scss

45 lines
854 B
SCSS

.#{$ns}Progress {
height: 10px;
background: #ebebeb;
overflow: hidden;
&-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 10px;
color: #fff;
text-align: center;
background: var(--primary);
transition: width var(--animation-duration) ease;
&--stripe {
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
);
background-size: 2rem 2rem;
}
&--animate {
animation: progress-bar-stripes 1s linear infinite;
}
}
}
@keyframes progress-bar-stripes {
from {
background-position: 2rem 0;
}
to {
background-position: 0 0;
}
}