CSS实现环形进度条

克劳迪尔

已于 2024-12-10 14:56:52 修改

阅读量339

点赞数 4

CC 4.0 BY-SA版权

文章标签： css 前端前端框架 vue.js html javascript

于 2024-12-09 16:04:18 首次发布

本文链接：https://blog.youkuaiyun.com/Coludidi/article/details/144350346

1. 利用conic-gradient 圆锥渐变

可以看看conic-gradient()详解

   <div class="progress" ></div>
   <style>
    .progress{
      height: 170px;
      width: 170px;
      border-radius: 50%;
      background: conic-gradient(
        rgb(25, 252, 236) 36deg,
        rgba(255, 255, 255, 0.1) 36deg 170deg
      );
    }
    </style>

2.中间加一遮罩层

   <div class="progress" >
        <div class="pie"></div>
  </div>
<style>
   .progress{
      height: 170px;
      width: 170px;
      border-radius: 50%;
      background: conic-gradient(
        rgb(25, 252, 236) 36deg,
        rgba(255, 255, 255, 0.1) 36deg 170deg
      );
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pie {
        height: 145px;
        width: 145px;
        background-color: rgb(12, 41, 76);
        border-radius: 50%;
    }
</style>

3.添加动画转动效果

   <div class="progress" >
        <div class="pie"></div>
  </div>
  <style>
   @keyframes rotate {
    0% {
        transform:rotate(0deg);
    }
    25% {
        /* 基于x,y轴   (-300px) 正值向下移动 负值向上移动*/
        transform:rotate(90deg);
    }
    50% {
        transform:rotate(180deg);
    }
    75% {
        transform:rotate(270deg);
    }
    100% {
        transform:rotate(360deg);
    }
   }
   .progress{
      height: 170px;
      width: 170px;
      border-radius: 50%;
      background: conic-gradient(
        rgb(25, 252, 236) 36deg,
        rgba(255, 255, 255, 0.1) 36deg 170deg
      );
      display: flex;
      justify-content: center;
      align-items: center;
      animation-name: rotate;
      /* 关键帧动画需要的时长 */
      animation-duration: 3s;
      /* 指定关键帧动画执行的次数  infinite 无限次数*/
      animation-iteration-count: infinite;
      /* 动画执行函数  */
      animation-timing-function: linear;
    }
    .pie {
        height: 145px;
        width: 145px;
        background-color: rgb(12, 41, 76);
        border-radius: 50%;
    }
  </style>

最终效果：

动态样式：

 <div 
   class="progress" 
   :style="{
      background:`conic-gradient(rgb(25, 252, 236)${graditentLeft}deg, 
               rgba(255, 255, 255, 0.1) ${graditentLeft}deg 360deg)` }">
<div class="pie"></div>
</div>

  data() {
    return {
      graditentLeft: 360 * 0.25,
      graditentRight: 360 * 0.75,     
    };
  },