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>

<style lang="scss">
.mhy-audio-player {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  &__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  &__circle {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 1;
    stroke:#D3BC8E;
    fill:none;
  }
  &__circle1 {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 1;
    fill:none;
  }
  &__status {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    z-index: 5;
    &--play {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        width: 3px;
        height: 8px;
        background-color: #D3BC8E;
        border-radius: 3px;
      }
      span:last-child {
        margin-left: 4px;
      }
    }
    &--pause {
      margin-left: 1px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotate(-90deg);
      i {
        font-size: 14px;
        color: #D3BC8E;
      }
    }
  }
  circle {
    transition: stroke-dasharray .2s;
  }
}
</style>