kingdot/src/styles/lib/theme-default/Progress.css

A UI Components Library For Vue

.kd-progress{position:relative}.kd-progress div{box-sizing:border-box}.kd-progress-bar{display:inline-block;width:100%;margin-right:-58px;padding-right:50px;vertical-align:middle}.kd-progress-without-text .kd-progress-bar{margin-right:0;padding-right:0}.kd-progress-bar-outer{background-color:#ececec;border-radius:1000px;overflow:hidden}.kd-progress-bar-inner{position:relative;display:table;height:100%;color:#fff;border-radius:1000px}.kd-progress-bar-inner div{position:relative;padding-right:6px;display:table-cell;vertical-align:middle;text-align:right}.kd-progress-circle,.kd-progress-text{display:inline-block}.kd-progress-text{margin-left:16px;vertical-align:middle}.kd-progress-circle .kd-progress-text{margin:0;position:absolute;left:0;top:50%;width:100%;text-align:center;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}div.kd-progress-bar-active:before{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;border-radius:100px;-webkit-animation:progress-active 2s ease-in-out infinite;animation:progress-active 2s ease-in-out infinite}i.kd-icon-success,i.kd-icon-success-solid{color:#38c482}i.kd-icon-error,i.kd-icon-error-solid{color:#ef4e76}i.kd-icon-warning-solid{color:#ff9a42}@-webkit-keyframes progress-active{0%{opacity:.3;width:0}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:.3;width:0}100%{opacity:0;width:100%}}