Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use svg to generate a circular progress bar", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use svg to generate a circular progress bar.

The code is very simple:

To make it easier to demonstrate, let's first use css animation 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, which is to apply the stroke-dashoffset and stroke-dasharray properties of svg.

Stroke-dasharray

Officially interpreted as a pattern paradigm that can control the dash used to stroke, that is, to define the length of each segment of a dash, that is, the interval between dotted lines, to separate numbers with commas or blanks, and to specify the length of dashes and gaps. If an odd number of values are provided, the sequence of values is repeated once, thus becoming an even number of values.

Stroke-dashoffset

Identifies the offset value of the entire path.

By controlling the interval and offset of dotted lines, you can travel a variety of line animations. Of course, we can also control them through js, as follows:

Let path = document.querySelector ('# path'); / / the length of the available path let len = path.getTotalLength (); path.style.cssText = `path: "${number}" `. Now that you have a better understanding of "how to use svg to generate a circular progress bar", you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.