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

最新推荐文章于 2024-08-23 10:01:15 发布

小敏哥

最新推荐文章于 2024-08-23 10:01:15 发布

阅读量6.9k

点赞数 1

分类专栏： web前端文章标签：环形进度条 css3 js 弧形动画弧形进度条

本文链接：https://blog.csdn.net/handsomexiaominge/article/details/51622008

版权

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

摘要由CSDN通过智能技术生成

进度条用多了，有没有想过环形的呢，说实在的，虽然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: 8