js+css3实现一个环形进度条插件

最新推荐文章于 2025-11-04 12:31:16 发布

原创

最新推荐文章于 2025-11-04 12:31:16 发布 · 7.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#环形进度条 #css3 #js #弧形动画 #弧形进度条

本文介绍了如何使用js和css3结合，通过旋转和裁剪技术实现环形进度条动画。首先利用css3的旋转动画和clip属性创建基本结构，然后通过js动态调整裁剪区域和旋转角度，以适应不同百分比的进度展示。最终，将这种方法封装成一个可配置的插件，可在GitHub上查看完整代码。

进度条用多了，有没有想过环形的呢，说实在的，虽然css3提供了很强大的动画功能，包括各种旋转，直线运动，然而，并没有曲线运动，那么只好综合运用已有的功能进行实现，这里用到的比较多的就是旋转，先看下面的这几段代码，这是网上一个哥们写的，先用来理解一下实现的原理，虽然有一堆的兼容性问题，只能在pc版的chome上面使用，但是用来学习已经足够了，后面再奉上修改后的源码。

html:

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

css:

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}