CSS: 使用 svg 实现圆形进度条

使用 Vue 框架进行实现

<template>
  <div class="mhy-audio-player" @click="onClickAudio">
    <div  class="mhy-audio-player__svg">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           width="24"
           height="24"
           viewBox="0 0 26 26"
           preserveAspectRatio="xMinYMin meet"
      >
        <circle
          cx="13" cy="13" r="12"
          class="mhy-audio-player__circle1"
        />
        <circle
          cx="13" cy="13" r="12"
          class="mhy-audio-player__circle"
          stroke-dasharray="75"
          :stroke-dashoffset="dashoffset"/>
      svg>
    div>
    <div class="mhy-audio-player__status">
      <div
        v-if="isPlay"
        class="mhy-audio-player__status--play">
        <span>span>
        <span>span>
      div>
      <div
        v-else
        class="mhy-audio-player__status--pause">
        <mhy-icon name="select_arrow"/>
      div>
    div>
  div>
template>

<script>
  export default {
    name: 'mhy-audio-player',
    data() {
      return {
        isPlay: false,
        process: 0
      };
    },
    computed: {
      dashoffset() {
        return 75 * (1 - this.process);
      }
    },
    methods: {
      onClickAudio() {
        setInterval(() => {
          this.process += 0.01;
        }, 15);
        this.isPlay = !this.isPlay;
      }
    }
  };
</script>