工作中遇到这种图形怎么画，前端

Question

Answer 1

张鑫旭-寥寥数行SVG实现圆环loading或倒计时效果
张鑫旭-CSS3实现鸡蛋饼饼状图loading等待转转转

Answer 2

一个基于 SVG 及 CSS3 的环形进度条 - 三十客

Answer 3

canvas实现

Answer 4

<style>
        .control {
            flex: 0 0 30px;
            width: 30px;
            padding: 0 10px;
        }

        .icon-play-mini {
            font-size: 30px;
            color: red;
        }

        .icon-mini {
            font-size: 32px;
            position: absolute;
            font-style: normal;
            left: 33px;
            top: 29px;
        }

        .progress-circle {
            position: relative
        }

        circle {
            stroke-width: 8px;
            transform-origin: center;
        }

        circle.progress-background {
            transform: scale(0.9);
            stroke: yellow;
        }

        circle.progress-bar {
            transform: scale(0.9) rotate(-90deg);
            stroke: green
        }

    </style>
    <script>
      var loadProgress = 0.8
      var dashArray = Math.PI * 100
      var dashOffset = (1 - loadProgress) * dashArray
      document.write(
        '<div class="control">' +
        '<div class="progress-circle">' +
        '        <svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
        '            <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"></circle>' +
        '            <circle class="progress-bar" cx="50" cy="50" r="50" fill="transparent" stroke-dashoffset="' + dashOffset + '" stroke-dasharray="' + dashArray + '"></circle>' +
        '        </svg>' +
        '        <i class="icon-play-mini icon-mini" >' + loadProgress * 100 + '</i>' +
        '</div>' +
        '</div>'
      )
    </script>

Answer 5

svg 和 path

Answer 6

可以用canvas实现。

Answer 7

canvas