src/style/progress.less
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-o-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@-webkit-keyframes loading-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes loading-spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes loading-spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@keyframes loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.@{prefix-cls}-progress {
overflow: hidden;
border-radius: 4px;
box-shadow: none;
background: @lightColor;
}
.@{prefix-cls}-progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: @whiteColor;
text-align: center;
background-color: @primaryColor;
transition: width .6s ease;
&-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
&-animated {
animation: progress-bar-stripes 2s linear infinite;
}
&-success {
background-color: @successColor;
}
&-info {
background-color: @infoColor;
}
&-warning {
background-color: @warningColor;
}
&-danger {
background-color: @dangerColor;
}
}