mirror of
https://github.com/bakhirev/assayo.git
synced 2025-09-01 01:59:39 +00:00
69 lines
No EOL
1.4 KiB
SCSS
69 lines
No EOL
1.4 KiB
SCSS
.progress_bar {
|
|
display: block;
|
|
width: 100%;
|
|
height: 16px;
|
|
text-align: left;
|
|
border-radius: 4px;
|
|
|
|
background-color: #404148;
|
|
|
|
&:after {
|
|
content: '';
|
|
font-size: 0.8em;
|
|
display: block;
|
|
width: 0;
|
|
height: 100%;
|
|
padding-top: 0.1em;
|
|
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-wrap: break-word;
|
|
border-radius: 4px;
|
|
|
|
color: white;
|
|
background-color: green;
|
|
background-size: 23px 22px;
|
|
|
|
background-image: -webkit-repeating-linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .35) 8px, rgba(255, 255, 255, 0) 9px, rgba(255, 255, 255, 0) 16px);
|
|
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .35) 8px, rgba(255, 255, 255, 0) 9px, rgba(255, 255, 255, 0) 16px);
|
|
}
|
|
}
|
|
|
|
.progress_bar,
|
|
.progress_bar:after {
|
|
transition: background-color 0.7s, width 0.5s;
|
|
}
|
|
|
|
.progress_bar:after {
|
|
animation: progress_bar 4.3s linear forwards;
|
|
}
|
|
|
|
@keyframes progress_bar {
|
|
from {
|
|
width: 0;
|
|
background-size: 23px 22px;
|
|
}
|
|
10% {
|
|
width: 1%;
|
|
background-size: 23px 32px;
|
|
}
|
|
80% {
|
|
width: 50%;
|
|
background-size: 23px 32px;
|
|
}
|
|
90% {
|
|
width: 90%;
|
|
background-size: 23px 32px;
|
|
}
|
|
98% {
|
|
width: 92%;
|
|
background-size: 23px 32px;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
background-size: 23px 44px;
|
|
}
|
|
} |