nutui-taro-upgrade/dist/packages/progress/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-progress{width:100%;position:relative;display:flex;align-items:center}.nut-progress .nut-progress-outer{flex:1;background-color:var(--nut-progress-outer-background-color, #f3f3f3);border-radius:var(--nut-progress-outer-border-radius, 12px);height:10px}.nut-progress .nut-progress-outer .nut-progress-inner{width:30%;height:100%;border-radius:var(--nut-progress-outer-border-radius, 12px);background:var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%));-webkit-transition:all .4s;transition:all .4s}.nut-progress .nut-progress-outer .nut-progress-text{display:flex;flex-direction:column;justify-content:center;color:#fff}.nut-progress .nut-progress-outer .nut-progress-slot{display:flex;justify-content:center;align-items:center}.nut-progress .nut-progress-outer .nut-active:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--nut-progress-outer-border-radius, 12px);animation:progressActive 2s ease-in-out infinite}@keyframes progressActive{0%{background:rgba(255,255,255,.1);width:0}20%{background:rgba(255,255,255,.5);width:0}to{background:rgba(255,255,255,0);width:100%}}.nut-progress .nut-progress-outer.nut-progress-small{height:var(--nut-progress-small-height, 5px)}.nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text{font-size:var(--nut-progress-small-text-font-size, 7px);line-height:var(--nut-progress-small-text-line-height, 10px);padding:var(--nut-progress-small-text-padding, 2px 4px);top:50%}.nut-progress .nut-progress-outer.nut-progress-base{height:var(--nut-progress-base-height, 10px)}.nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text{font-size:var(--nut-progress-base-text-font-size, 9px);line-height:var(--nut-progress-base-text-line-height, 13px);padding:var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px));top:50%}.nut-progress .nut-progress-outer.nut-progress-large{height:var(--nut-progress-large-height, 15px)}.nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text{font-size:var(--nut-progress-large-text-font-size, 13px);line-height:var(--nut-progress-large-text-line-height, 18px);padding:var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3px 5px 3px 6px));top:50%}.nut-progress .nut-progress-outer-part{width:90%}.nut-progress .nut-progress-text{padding:0 5px;font-size:13px;line-height:1;min-width:35px;display:flex;align-items:center}.nut-progress .nut-progress-insidetext{padding:var(--nut-progress-insidetext-padding, 3px 5px 3px 6px);background:var(--nut-progress-insidetext-background, var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)));border-radius:var(--nut-progress-insidetext-border-radius, 5px);position:absolute;transition:all .4s;top:50%;min-width:0px}.nut-progress .nut-icon-success,.nut-progress .nut-icon-fail{width:10px;height:10px;display:inline-block}