The realization method of generating circular progress bar by HTML svg


Previously, I met the requirement of a circular progress bar in the project, which requires that the progress can be updated in real time, and the scheme in CSS, SVG, and canvas will pop up in my mind in an instant. For the three schemes, I prefer SVG, which is simple to use, with little code, and easy to control in real time. The specific effect is as follows:

The code is very simple:

<svg width="150px" height="150px" class="svg">
    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />

To facilitate the demonstration, we use CSS animation to control:

svg {
    transform: rotate(-90deg);
.progress {
    animation: rotate 1500ms linear both;
@keyframes rotate {
    from {
        stroke-dashoffset: 471px;
    to {
        stroke-dashoffset: 0px;

Realization principle

The principle of implementation is very simple, that is to apply the stroke dasheffset and stroke dasharray attributes of SVG.


It is officially interpreted as a pattern pattern pattern that can control the dashes used for edge tracing, that is, to define the length of each segment of the dashes, that is, the interval between dashes, the comma or blank between numbers, and to specify the length of the dashes and notches. If an odd number of values is provided, the sequence of values is repeated once, resulting in an even number of values.


Identifies the offset value of the entire path.

By controlling the interval and offset value of the dotted line, we can travel all kinds of line animation. Of course, we can also control through JS, as follows:

let path = document.querySelector('#path');
//Length of available paths
let len = path.getTotalLength(); = `stroke-dasharray:"${number}"`;

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]