zent/css/progress.css

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

.zent-progress-info {
  font-size: 14px;
  line-height: 20px;
  color: #999;
  color: var(--theme-hint-color, var(--theme-stroke-3, #999));
  font-weight: 500;
  display: inline-block;
}
.zent-progress-info > .zenticon {
  font-size: 20px;
}
.zent-progress-type__line .zent-progress-container {
  display: flex;
  align-items: center;
}
.zent-progress-type__line .zent-progress-wrapper {
  display: inline-block;
  vertical-align: middle;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.05);
}
.zent-progress-type__line .zent-progress-wrapper--round .zent-progress-inner {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}
.zent-progress-type__line .zent-progress-wrapper--square:not(.zent-progress-wrapper--finished) .zent-progress-inner {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.zent-progress-type__line .zent-progress-inner {
  transition: all 160ms cubic-bezier(0.17, 0.84, 0.44, 0.1);
  position: relative;
  border-radius: 100px;
}
.zent-progress-type__line .zent-progress-inner:after {
  display: block;
  position: absolute;
  top: 0;
  content: " ";
  width: 20%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  background: linear-gradient(to right, rgba(var(--theme-rgb-section-bg, var(--theme-rgb-stroke-9, 255, 255, 255)), 0), var(--theme-section-bg, var(--theme-stroke-9, #fff)));
  animation: 1400ms cubic-bezier(0, 0, 0.1, 0.1) 0s infinite normal both running zent-ani-progress-mask-move;
}
.zent-progress-type__line .zent-progress-info {
  margin-left: 8px;
  white-space: nowrap;
  vertical-align: middle;
  height: 20px;
  line-height: 20px;
}
.zent-progress-type__line.zent-progress-state__normal .zent-progress-inner {
  background-color: #155bd4;
  background-color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-progress-type__line.zent-progress-state__normal .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__line.zent-progress-state__normal .zent-progress-info > .zenticon {
  color: #155bd4;
  color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-progress-type__line.zent-progress-state__success .zent-progress-inner {
  background-color: #45a110;
  background-color: var(--theme-success-color, var(--theme-success-2, #45a110));
}
.zent-progress-type__line.zent-progress-state__success .zent-progress-inner:after {
  display: none;
}
.zent-progress-type__line.zent-progress-state__success .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__line.zent-progress-state__success .zent-progress-info > .zenticon {
  color: #45a110;
  color: var(--theme-success-color, var(--theme-success-2, #45a110));
}
.zent-progress-type__line.zent-progress-state__exception .zent-progress-inner {
  background-color: #d42f15;
  background-color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
}
.zent-progress-type__line.zent-progress-state__exception .zent-progress-inner:after {
  display: none;
}
.zent-progress-type__line.zent-progress-state__exception .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__line.zent-progress-state__exception .zent-progress-info > .zenticon {
  color: #d42f15;
  color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
}
.zent-progress-type__circle {
  position: relative;
  display: inline-block;
}
.zent-progress-type__circle .zent-progress-wrapper,
.zent-progress-type__circle .zent-progress-inner {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.zent-progress-type__circle .zent-progress-wrapper {
  border-color: #f7f7f7;
  border-color: var(--theme-body-bg, var(--theme-stroke-8, #f7f7f7));
  border-style: solid;
  box-sizing: border-box;
  border-radius: 50%;
}
.zent-progress-type__circle .zent-progress-info {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.zent-progress-type__circle .zent-progress-inner-path,
.zent-progress-type__circle .zent-progress-path-mask {
  stroke-linecap: round;
  fill: none;
  transform-origin: center;
}
.zent-progress-type__circle .zent-progress-inner-path--square,
.zent-progress-type__circle .zent-progress-path-mask--square {
  stroke-linecap: square;
}
.zent-progress-type__circle .zent-progress-inner-path {
  transition: stroke-dashoffset 160ms cubic-bezier(0.17, 0.84, 0.44, 0.1);
}
.zent-progress-type__circle .zent-progress-path-mask {
  transition: transform 400ms cubic-bezier(0, 0, 0.1, 0.1);
}
.zent-progress-type__circle.zent-progress-state__normal .zent-progress-inner-path {
  stroke: #155bd4;
  stroke: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-progress-type__circle.zent-progress-state__normal .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__circle.zent-progress-state__normal .zent-progress-info > .zenticon {
  color: #155bd4;
  color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-progress-type__circle.zent-progress-state__success .zent-progress-inner-path {
  stroke: #45a110;
  stroke: var(--theme-success-color, var(--theme-success-2, #45a110));
}
.zent-progress-type__circle.zent-progress-state__success .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__circle.zent-progress-state__success .zent-progress-info > .zenticon {
  color: #45a110;
  color: var(--theme-success-color, var(--theme-success-2, #45a110));
}
.zent-progress-type__circle.zent-progress-state__exception .zent-progress-inner-path {
  stroke: #d42f15;
  stroke: var(--theme-danger-color, var(--theme-error-2, #d42f15));
}
.zent-progress-type__circle.zent-progress-state__exception .zent-progress-info {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
}
.zent-progress-type__circle.zent-progress-state__exception .zent-progress-info > .zenticon {
  color: #d42f15;
  color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
}

@keyframes zent-ani-progress-mask-move {
  0% {
    left: 0;
    opacity: 0.2;
  }
  28% {
    left: 100%;
    opacity: 0.2;
  }
  29% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}