131 lines
2.4 KiB
Plaintext
131 lines
2.4 KiB
Plaintext
@import '../common/style/index.less';
|
|
|
|
// 颜色
|
|
@progress-default-track-color: #e7e7e7;
|
|
@progress-default: #0052d9;
|
|
@progress-success: #078d5c;
|
|
@progress-error: #e34d59;
|
|
@progress-warning: #ed7b2f;
|
|
@progress-inner-bg-color-active: #fff;
|
|
// 尺寸
|
|
@progress-stroke-width: 8rpx;
|
|
@progress-stroke-width-8: @progress-stroke-width * 8;
|
|
|
|
// 字体
|
|
@progress-font-size: 32rpx;
|
|
@progress-text-color: rgba(0, 0, 0, 0.9);
|
|
@progress-text-height: 48rpx;
|
|
|
|
// 间距
|
|
@progress-info-spacer: 16rpx;
|
|
@progress-inner-border-radius: 100rpx;
|
|
|
|
.@{prefix}-progress {
|
|
&__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: @progress-stroke-width-8;
|
|
}
|
|
|
|
&__bar {
|
|
position: relative;
|
|
flex: 1;
|
|
height: @progress-stroke-width;
|
|
background: @progress-default-track-color;
|
|
|
|
&-percent {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
background: @progress-default;
|
|
transition: all 0.3s ease-out;
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
display: inline-block;
|
|
width: 84rpx;
|
|
text-align: right;
|
|
margin-left: 32rpx;
|
|
font-size: @progress-font-size;
|
|
color: @progress-text-color;
|
|
line-height: @progress-text-height;
|
|
}
|
|
}
|
|
|
|
//进度条状态
|
|
.@{prefix}-progress--status--active {
|
|
.@{prefix}-progress {
|
|
&__bar {
|
|
&-percent {
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
content: '';
|
|
animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
|
|
background: @progress-inner-bg-color-active;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{prefix}-progress--status--success {
|
|
.@{prefix}-progress {
|
|
&__bar {
|
|
&-percent {
|
|
background: @progress-success;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{prefix}-progress--status--warning {
|
|
.@{prefix}-progress {
|
|
&__bar {
|
|
&-percent {
|
|
background: @progress-warning;
|
|
}
|
|
}
|
|
&__label {
|
|
color: @progress-warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{prefix}-progress--status--error {
|
|
.@{prefix}-progress {
|
|
&__bar {
|
|
&-percent {
|
|
background: @progress-error;
|
|
}
|
|
}
|
|
&__label {
|
|
color: @progress-error;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes progress-active-animation {
|
|
0% {
|
|
width: 0;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
35% {
|
|
width: 50%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
100% {
|
|
width: 100%;
|
|
opacity: 0;
|
|
}
|
|
}
|