Question

所以，我有一个CSS进度微调器，需要10秒才能完全加载，使用以下代码：

.loader {
  border: 16px solid #d4d8da;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 10s linear infinite;
  animation: spin 10s linear  infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

HTML：

<div class="loader"></div>

但我无法弄清楚如何根据进度/时间填充孔灰色圆圈。

你能帮我吗？

谢谢。

https://jsfiddle.net/6Ln61q0b/

Answer 1

这段代码对我有用：

@import "compass/css3";

.wrapper {
  position: relative;
  margin: 40px auto;
  background: white;
}

@mixin timer($item, $duration, $size, $color, $border, $hover: running) {
  #{$item}, #{$item} * { @include box-sizing(border-box); }

  #{$item} { 
    width: $size;
    height: $size;
  }

  #{$item} .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: $color;
    border: #{$border};
  }

  #{$item} .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
    animation: rota $duration + s linear infinite;
  }

  #{$item}:hover .spinner,
  #{$item}:hover .filler, 
  #{$item}:hover .mask {
    animation-play-state: $hover;    
  }

  #{$item} .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
    left: 50%;
    opacity: 0;
    z-index: 100;
    animation: opa $duration + s steps(1,end) infinite reverse;
    border-left: none;
  }

  #{$item} .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    animation: opa $duration + s steps(1,end) infinite;
  }

  @keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes opa {
    0% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
}

@include timer('.wrapper', 5, 250px, #08C, '1px solid white');

和HTML

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

https://codepen.io/HugoGiraudel/pen/BHEwo

感谢大家。

完全进步微调器纯css

1 个答案: