yu.css.ui/css/component/progress.css

纯CSS通用UI模块和组件

.yu-progress {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  display: flex; }

@keyframes progress-active {
  0% {
    opacity: 0.1;
    width: 0; }
  20% {
    opacity: 0.5;
    width: 0; }
  100% {
    opacity: 0;
    width: 100%; } }
  .yu-progress .line-outer {
    width: 100%;
    border-radius: 5px;
    height: 10px;
    background-color: #f5f5f9; }
    .yu-progress .line-outer .line-inner {
      width: 0;
      height: 10px;
      border-radius: 5px;
      background-color: #409EFF;
      position: relative; }
      .yu-progress .line-outer .line-inner.active::before {
        content: "";
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-radius: 10px;
        animation: progress-active 2s ease infinite; }
  .yu-progress .text {
    font-size: 14px;
    text-align: right;
    margin-top: -6px;
    width: 45px; }
    .yu-progress .text i {
      font-size: 20px;
      color: #67C23A; }
  .yu-progress .circle-outer {
    position: relative;
    display: inline-block; }
    .yu-progress .circle-outer .text-warp {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }