如何在只有css的图像上创建循环进度条？

Question

我正在尝试在图像上创建一个圆形进度条，就像附加的图像一样。

我喜欢100％，隐藏进度。有什么帮助吗？

Answer 1

您可以使用CSS动画。此解决方案使用动画圆圈：

＆＃13;

＆＃13;

.circle {
  display: inline-flex;
  border-radius: 100%;
  background-image: url("https://i.stack.imgur.com/sRV6Q.jpg");
  overflow: hidden;
}

.circle__half {
  height: 200px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.circle__half:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 100px 0 0 100px;
  background-color: lime;
  transform-origin: 100% 50%;
  /* hidden by default */
  transform: rotate(180deg);
  opacity: 0.65;
  animation-name: rotate-circle-half;
  animation-duration: 4s;
  animation-timing-function: linear;
}

.circle__half--right {
  transform: scale(-1, -1);
}

.circle .circle__half--right:before {
  animation-name: rotate-circle-half--right;
}

/* show half of circle half of the time */
@keyframes rotate-circle-half {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-circle-half--right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

＆＃13;

<div class="circle">
  <div class="circle__half"></div>
  <div class="circle__half circle__half--right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

此外，如果你想要平滑的圆圈隐藏，你可以添加圆圈的动画：

＆＃13;

＆＃13;

.circle {
  display: inline-flex;
  border-radius: 100%;
  background-image: url("https://i.stack.imgur.com/sRV6Q.jpg");
  overflow: hidden;
}

.circle__half {
  height: 200px;
  width: 100px;
  position: relative;
  overflow: hidden;
  animation-name: hide-smoothly;
  animation-duration: 2s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}

.circle__half:before {
  height: inherit;
  width: inherit;
  position: absolute;
  content: "";
  border-radius: 100px 0 0 100px;
  background-color: lime;
  transform-origin: 100% 50%;
  /* hidden by default */
  transform: rotate(180deg);
  opacity: 0.65;
  animation-name: rotate-circle-half;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.circle__half--right {
  transform: scale(-1, -1);
}

.circle .circle__half--right:before {
  animation-name: rotate-circle-half--right;
}

/* show half of circle half of the time */
@keyframes rotate-circle-half {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-circle-half--right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes hide-smoothly {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

＆＃13;

<div class="circle">
  <div class="circle__half"></div>
  <div class="circle__half circle__half--right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

有一个能够执行此操作的插件：jQuery.knob。

＆＃13;

＆＃13;

$(function() {
  $(".knob").knob();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
<input class="knob" data-width="150" data-width="100" data-displayInput="false" data-displayPrevious="true" data-fgColor="#87ceeb" data-skin="tron" data-thickness="15" value="75" />

＆＃13;

＆＃13;

＆＃13;

如果您想要动画，可以更改输入的value！只需将鼠标移到旋钮上，然后使用鼠标滚轮滚动它。或者在此处查看动画：jQuery Knob update value with animate