SVG Path implements a circular progress bar

Using SVG path to achieve circular progress bar

Pay attention to the point

  1. Stroke-dasharray =”3 1″ indicates a dashed line of length 3, spaced 1, and that the dashed line is looped indefinitely within the width of SVG

  2. Stroke-dashoffset indicates the position of the dotted line offset, positive numbers offset to the left and negative numbers offset to the right (contrary to our normal perception)

  3. We can set the dasharray dotted line length to be equal to the width of the SVG and the interval to be greater than or equal to the width of the SVG. When the mouse moves in, set offset to 0 to achieve the effect of the line segment from short to long

  4. Two or more parameters: one for length and one for spacing

    • For example: stroke-dasharray = ’10, 5′ means: dashed line length 10, spacing 5, then repeat dashed line length 10, spacing 5
    • For example, stroke-dasharray = ’20, 10, 5′ means: dashed line length 20, pitch 10, dashed line length 5, then pitch 20, dashed line 10, pitch 5, and then the cycle begins

  5. graphic

The key code

/ / HTML
<svg width="200" height="200">
    <line x1="0" y1="0" x2="200" y2="0" 
    stroke-width="20" 
    stroke="black" 
    stroke-dasharray="200, 210"
    stroke-width="20" stroke-dashoffset="200" />
</svg>
/ / CSS
line {
   transition: all 2s;
}
svg:hover line {
  stroke-dashoffset: 0;
}
Copy the code

Once you’ve mastered the key points above, you can change the shape a little bit to create some other nice lines

And something like this

PS: This is the first time to post an article, I hope you can support (#^.^#)