CSS锥形渐变实现环形进度条

10月份因为疫情原因、又开启了居家办公模式，空闲之余，与其选择“躺平”，不如去做一些有意义的事情，内心的想法驱使着我去做些什么，但是又没有合适的素材，直到接手了最近的一个可视化项目，一个图表勾起了我无限的好奇心，本着对技术死磕到底的想法，于是开启了我的探索之旅。具体的原型效果如下：

关于此类进度条的实现方式，在我之前的章节（SVG绘制圆环进度条）中也有涉及，本章则另辟蹊跷，从另一个维度简单介绍一下CSS锥形渐变（conic-gradient）在可视化图表中的应用场景。本章依旧采用vue+原生css的形式进行案例展示、在了解本章节之前，需要对vue框架、css变量、css属性conic-gradient有一定程度的认识。案例实现效果如下：

实现思路：首先从原型图入手，我们可以将效果图进行拆分，背景圆环+进度圆环+进度条开始处小圆点（和边框一样大小、模拟圆角效果）+进度尾部圆点+进度尾部小眼睛+进度条中心内容。因此我们只需要将以上几个小功能点实现即可

1.背景圆环：div添加背景颜色+圆角

2.进度圆环：使用css属性conic-gradient进行进度控制

3.进度条开始处小圆点：使用伪元素（::before或::after）或div均可，定位解决

4.进度条尾部圆点：相当于在一个指针上添加一个小球，然后将指针根据数值旋转一定的角度

5.进度尾部小眼睛：使用指针头部小球元素的伪元素进行定位

6.进度条中心内容：可根据需要，使用插槽的形式解决

首先看一下前两个图表的具体实现细节：

<!-- demo1.vue -->
<template>
  <div class="chart-box" :style="styObj">
    <!-- 进度条部分 -->
    <div class="outer-box">
      <div class="inner-box">
        <div class="pointer-box"></div>
      </div>
    </div>
    <!-- 插槽内容 -->
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    rate: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styObj() {
      let rate = 0;
      if (this.rate <= 0) {
        rate = 0;
      } else if (this.rate >= 1) {
        rate = 1;
      } else {
        rate = this.rate;
      }
      let endPos = `${rate * 100}%`;
      let obj = Object.assign({}, this.defaultConfig, this.config);
      let rotate = `rotate(${360 * rate}deg)`;
      let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
      let showEyes = obj.showEyes ? 1 : 0;
      return {
        "--background-image": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
        "--border-width": obj.borderWidth,
        "--dot-width": obj.circleSize,
        "--pointer-rotate": rotate,
        "--background-color": obj.borderBackground,
        "--center-gap-bg": obj.centerCircleBg,
        "--circle-color": obj.circleColor,
        "--clockwise-wise": chartRotate,
        "--show-eyes": showEyes,
        "--eyes-size": obj.eyesSize,
        "--start-color": obj.startColor,
      };
    },
  },
  data() {
    return {
      /* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */
      defaultConfig: {
        borderWidth: "8px", // 描边宽度
        borderBackground: "#eee", // 描边背景颜色
        circleSize: "16px", // 结尾处圆点直径
        circleColor: "#2ec4a7", // 结尾处圆点颜色
        startColor: "#d5f4ee", // 进度条起始颜色
        endColor: "#2ec4a7", // 进度条结束颜色
        centerCircleBg: "#fff", // 中间空心圆背景
        clockwise: true, // 是否顺时针
        showEyes: false, // 是否显示结尾处小眼睛
        eyesSize: "8px", // 结尾处小眼睛大小
      },
    };
  },
};
</script>
<style scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 核心代码、控制进度条样式及进度 */
.outer-box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--background-color);
  background-image: var(--background-image);
  padding: var(--border-width);
  transform: var(--clockwise-wise);
}
/* 开始处增加一个圆形端点, 模拟圆角效果 */
.outer-box::after {
  content: "";
  width: var(--border-width);
  height: var(--border-width);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: var(--start-color);
}
/* 中间添加一个和背景色一样的圆圈 */
.inner-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--center-gap-bg);
}
/* 指示针 */
.pointer-box {
  position: absolute;
  left: 50%;
  top: calc(0px - var(--border-width) / 2);
  bottom: calc(0px - var(--border-width) / 2);
  z-index: 1;
  transform-origin: center center;
  transform: var(--pointer-rotate);
}
/* 指示针的头部添加一个小圆点 */
.pointer-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--dot-width);
  height: var(--dot-width);
  border-radius: 50%;
  background: var(--circle-color);
  transform: translate(-50%, -50%);
}
/* 进度条结尾处添加一个小眼睛，背景白色 */
.pointer-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--eyes-size);
  height: var(--eyes-size);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: var(--show-eyes);
}
/* 插槽内容样式 */
.slot-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

分析：从代码中不难看出、进度圆环中间的空白地方（class类名为“inner-box”）使用了一个背景为白色的元素进行遮盖，这点需要根据具体场景进行微调，在纯色背景下并无大碍，但是在有背景图的场景下，显示效果就有点差强人意了。因此此处需要做一下优化，扒一扒css手册，刚好有一个属性可以解决这个问题，那就是mask属性了，优化后代码如下，实现效果见第三、四个图表

<!-- demo2 -->
<template>
  <div class="chart-box" :style="styObj">
    <!-- 进度条部分 -->
    <div class="process-wrapper">
      <div class="process-box"></div>
      <div class="pointer-box"></div>
    </div>
    <!-- 插槽内容 -->
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    rate: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styObj() {
      let rate = 0;
      if (this.rate <= 0) {
        rate = 0;
      } else if (this.rate >= 1) {
        rate = 1;
      } else {
        rate = this.rate;
      }
      let endPos = `${rate * 100}%`;
      let obj = Object.assign({}, this.defaultConfig, this.config);
      let rotate = `rotate(${360 * rate}deg)`;
      let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
      let showEyes = obj.showEyes ? 1 : 0;
      return {
        "--background-image": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
        "--border-width": obj.borderWidth,
        "--dot-width": obj.circleSize,
        "--pointer-rotate": rotate,
        "--background-color": obj.borderBackground,
        "--circle-color": obj.circleColor,
        "--clockwise-wise": chartRotate,
        "--show-eyes": showEyes,
        "--eyes-size": obj.eyesSize,
        "--start-color": obj.startColor,
      };
    },
  },
  data() {
    return {
      /* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */
      defaultConfig: {
        borderWidth: "8px", // 描边宽度
        borderBackground: "#eee", // 描边背景颜色
        circleSize: "16px", // 结尾处圆点直径
        circleColor: "#2ec4a7", // 结尾处圆点颜色
        startColor: "#d5f4ee", // 进度条起始颜色
        endColor: "#2ec4a7", // 进度条结束颜色
        clockwise: true, // 是否顺时针
        showEyes: false, // 是否显示结尾处小眼睛
        eyesSize: "8px", // 结尾处小眼睛大小
      },
    };
  },
};
</script>
<style scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 将图表和插槽内容分开，便于控制进度条顺时针亦或是逆时针 */
.process-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform: var(--clockwise-wise);
}
/* 开始处增加一个圆形端点，模拟圆角效果 */
.process-wrapper::after {
  content: "";
  width: var(--border-width);
  height: var(--border-width);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: var(--start-color);
}
/* 核心代码、控制进度条样式及进度 */
.process-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--background-color);
  background-image: var(--background-image);
  -webkit-mask: radial-gradient(
    closest-side at center center,
    transparent calc(100% - var(--border-width)),
    #fff calc(100% - var(--border-width))
  );
  mask: radial-gradient(
    closest-side at center center,
    transparent calc(100% - var(--border-width)),
    #fff calc(100% - var(--border-width))
  );
}
/* 指示针 */
.pointer-box {
  position: absolute;
  left: 50%;
  top: calc(0px + var(--border-width) / 2);
  bottom: calc(0px + var(--border-width) / 2);
  z-index: 1;
  transform: var(--pointer-rotate);
}
/* 指示针的头部（进度条结尾处）添加一个小圆点 */
.pointer-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--dot-width);
  height: var(--dot-width);
  border-radius: 50%;
  background: var(--circle-color);
  transform: translate(-50%, -50%);
}
/* 进度条结尾处添加一个小眼睛，背景白色 */
.pointer-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--eyes-size);
  height: var(--eyes-size);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: var(--show-eyes);
}
/* 插槽内容样式 */
.slot-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

至此、已完成了进度条的优化改造、不过还存在一个小小的瑕疵、使用mask后，进度条内部交合区域稍微也有一点锯齿感，这个暂时还没有找到优化措施，不过并无大碍。

为了实现更加丰富的展现形式、我们可以在进度条上添加分割线实现花纹效果、这个其实也不麻烦、只需要再添加一层锥形渐变即可解决，具体实现如下：

<!-- demo3 -->
<template>
  <div class="chart-box" :style="styObj">
    <div class="process-box">
      <div class="center-mask"></div>
    </div>
    <!-- 插槽内容 -->
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    rate: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    styObj() {
      let rate = 0;
      if (this.rate <= 0) {
        rate = 0;
      } else if (this.rate >= 1) {
        rate = 1;
      } else {
        rate = this.rate;
      }
      let endPos = `${rate * 100}%`;
      let obj = Object.assign({}, this.defaultConfig, this.config);
      let rotate = `rotate(${360 * rate}deg)`;
      let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
      let bgInfo = [];
      let gap = 100 / obj.gapNum;
      for (let i = 0; i < obj.gapNum; i++) {
        bgInfo.push(`#fff ${i * gap}%`);
        bgInfo.push(`#fff ${i * gap + obj.lineWidth}%`);
        bgInfo.push(`transparent ${i * gap + obj.lineWidth}%`);
        bgInfo.push(`transparent ${(i + 1) * gap}%`);
      }
      return {
        "--background-image": `conic-gradient(${bgInfo.join(",")})`,
        "--background-image1": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
        "--border-width": obj.borderWidth,
        "--background-color": obj.borderBackground,
        "--center-gap-bg": obj.centerCircleBg,
        "--clockwise-wise": chartRotate,
      };
    },
  },
  data() {
    return {
      /* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */
      defaultConfig: {
        borderWidth: "8px", // 描边宽度
        borderBackground: "#eee", // 描边背景颜色
        startColor: "#d5f4ee", // 进度条起始颜色
        endColor: "#2ec4a7", // 进度条结束颜色
        centerCircleBg: "#fff", // 中间空心圆背景
        clockwise: true, // 是否顺时针
        gapNum: 10, // 分割段数
        lineWidth: 2, // 间隔线宽度，百分比
      },
    };
  },
};
</script>
<style scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.process-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: var(--border-width);
  box-sizing: border-box;
  background-color: var(--background-color);
  background-image: var(--background-image), var(--background-image1);
  transform: var(--clockwise-wise);
}
.center-mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--center-gap-bg);
}
/* 插槽内容样式 */
.slot-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

最后，在汇总页面中依次将三个组件引入，增加不同的个性化参数，即可实现封面的展示效果，贴一下汇总页面代码

<template>
  <div class="page-box">
    <div class="main-box">
      <!-- 第一种实现方式，中间的镂空部分采用背景色（和页面背景一致）的形式 -->
      <div class="module">
        <conic-gradient :rate="0.8888">
          <span class="slot-font1">88.88%</span>
        </conic-gradient>
      </div>
      <div class="module">
        <conic-gradient :rate="0.8888" :config="config">
          <div class="slot-bg">
            <span class="slot-font2">88.88%</span>
          </div>
        </conic-gradient>
      </div>
      <!-- 第二种实现方式，中间镂空部分采用遮罩（mask）的方式实现 -->
      <div class="module">
        <conic-mask
          :rate="0.6666"
          :config="{ showEyes: true, eyesSize: '6px', circleSize: '8px' }"
        >
          <span class="slot-font1">66.66%</span>
        </conic-mask>
      </div>
      <div class="module">
        <conic-mask :rate="0.6666" :config="config">
          <div class="slot-bg">
            <span class="slot-font2">66.66%</span>
          </div>
        </conic-mask>
      </div>
    </div>
    <hr />
    <!-- 锥形渐变实现花纹进度条 -->
    <div class="main-box">
      <div class="module">
        <conic-process :rate="0.6666">
          <span class="slot-font1">66.66%</span>
        </conic-process>
      </div>
      <div class="module">
        <conic-process
          :rate="0.8888"
          :config="{
            startColor: '#e45739',
            endColor: '#e45739',
            borderBackground: '#fbedea',
            gapNum: 20,
            lineWidth: 1,
            clockwise: false
          }"
        >
          <div class="slot-bg">
            <span class="slot-font2">88.88%</span>
          </div>
        </conic-process>
      </div>
      <div class="module">
        <conic-process :rate="0.8888" :config="{ gapNum: 1, lineWidth: 0 }">
          <span class="slot-font1">88.88%</span>
        </conic-process>
      </div>
      <div class="module">
        <conic-process
          :rate="0.8888"
          :config="{
            startColor: '#e45739',
            endColor: '#e45739',
            borderBackground: '#fbedea',
            gapNum: 1,
            lineWidth: 0,
            clockwise: false,
          }"
        >
          <div class="slot-bg">
            <span class="slot-font2">88.88%</span>
          </div>
        </conic-process>
      </div>
    </div>
  </div>
</template>
<script>
import ConicGradient from "./demo1";
import ConicMask from "./demo2";
import ConicProcess from "./demo3";
export default {
  components: {
    ConicGradient,
    ConicMask,
    ConicProcess,
  },
  data() {
    return {
      config: {
        borderWidth: "8px",
        circleSize: "16px",
        circleColor: "#e45739",
        borderColor: "#d5f4ee",
        startColor: "#eead99",
        endColor: "#e45739",
        borderBackground: "#fbedea",
        centerCircleBg: "#fff",
        clockwise: false,
        showEyes: true,
      },
    };
  },
};
</script>
<style scoped>
.page-box {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.main-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.module {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  padding: 20px;
}
.slot-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background: #fbedea;
}
.slot-font1 {
  color: #009d84;
  font-size: 20px;
  font-weight: bold;
}
.slot-font2 {
  color: #e45638;
  font-size: 20px;
  font-weight: bold;
}
</style>

好了，本章节的内容就到这里，如小伙伴有疑问，可评论区留言、随时交流。