zent/css/progress.css

一套前端设计语言和基于React的实现

.zent-progress.zent-progress-line .zent-progress-wrapper {
      display: inline-block;
      background: #f8f8f8;
}
.zent-progress.zent-progress-line .zent-progress-inner {
      -webkit-transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
}
.zent-progress.zent-progress-line .zent-progress-info {
      display: inline-block;
      min-width: 27px;
      min-height: 15px;
      margin-left: 10px;
      font-size: 12px;
      color: #999;
      white-space: nowrap;
}
.zent-progress.zent-progress-line .zent-progress-inprogress .zent-progress-inner {
        background: #f44;
      }
.zent-progress.zent-progress-line .zent-progress-inprogress .zent-progress-info {
        color: #999;
      }
.zent-progress.zent-progress-line .zent-progress-success .zent-progress-inner {
        background: #4b0;
      }
.zent-progress.zent-progress-line .zent-progress-success .zent-progress-info {
        color: #4b0;
      }
.zent-progress.zent-progress-line .zent-progress-exception .zent-progress-inner {
        background: #f44;
      }
.zent-progress.zent-progress-line .zent-progress-exception .zent-progress-info {
        color: #f44;
      }
.zent-progress.zent-progress-circle {
      position: relative;
      display: inline-block;
}
.zent-progress.zent-progress-circle .zent-progress-wrapper, .zent-progress.zent-progress-circle .zent-progress-inner {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}
.zent-progress.zent-progress-circle .zent-progress-wrapper {
      border-style: solid;
      border-color: #f8f8f8;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
}
.zent-progress.zent-progress-circle .zent-progress-info {
      display: inline-block;
      font-size: 12px;
      color: #999;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
}
.zent-progress.zent-progress-circle .zent-progress-inner-path {
      stroke-linecap: round;
      fill: none;
      -webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
      transition: stroke-dashoffset 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      -webkit-transform-origin: center center;
              transform-origin: center center;
}
.zent-progress.zent-progress-circle .zent-progress-inprogress .zent-progress-inner-path {
        stroke: #f44;
      }
.zent-progress.zent-progress-circle .zent-progress-inprogress .zent-progress-info {
        color: #999;
      }
.zent-progress.zent-progress-circle .zent-progress-success .zent-progress-inner-path {
        stroke: #4b0;
      }
.zent-progress.zent-progress-circle .zent-progress-success .zent-progress-info {
        color: #4b0;
      }
.zent-progress.zent-progress-circle .zent-progress-exception .zent-progress-inner-path {
        stroke: #f44;
      }
.zent-progress.zent-progress-circle .zent-progress-exception .zent-progress-info {
        color: #f44;
      }