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

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

Ordinary rectangular progress bar we can easily achieve through div+css, while the ring is a bit troublesome, of course, he can also use div+css through the background property or clip attribute with css3 variables to achieve, but too complex and compatible and control are more troublesome, so, to achieve the best results we'd better use svg to achieve it.

The advantage of developing your own components is that the size, color, thickness, animation and so on can be expanded at will. Are you ready? it's about to start.

Text 1. Pass export default {name: "CircleProgress", data () {return {now: 0} }, props: {/ / Progress value value: {type: [String, Number], default: 0}, / / Dimension size: {type: [String, Number], default: 120}, / / Border weight strokeWidth: {type: [String, Number], default: 10} / / Progress bar color color: {type: String, default: "rgba (153 Number 202))}, / / Animation execution time duration: {type: [String, Number], default: 1000}}, computed: {percentage () {return this.value }, countDown () {return this.now;}, / / Center x axis coordinate cx () {return this.size / 2;}, / / Center y axis coordinate cy () {return this.size / 2;}, / / Radius radius () {return (this.size-this.strokeWidth) / 2 }, / / circumference circumference () {return 2 * Math.PI * this.radius;}, / / Progress length progress () {return (1-this.now / 100) * this.circumference;}},}

I believe you will guess how to develop through the above comments, our component can set the size, border thickness, progress bar color, and how long it will take to present the progress value from 0 to the length of the animation. As for the calculated attributes, when you draw the svg later, it is not difficult to see the purpose according to the one-to-one correspondence of the annotations.

two。 Structure and style {{countDown}}%

In fact, this is very simple to use svg to write two circles, the first as the gray bottom circle, the second is our progress bar, set the size of the center radius border color, and we have to change the filling color to the same name, have written the remaining two items stroke-dasharray and stroke-dashoffset, I believe everyone will guess, the core of the svg progress bar change is these two attributes, just calculated attributes have been calculated They are the circumference of the ring and the length of the current progress. We use the current progress value to calculate the percentage of the current length and realize the change of the circular progress bar. it is as simple as that.

Then we have to write a drop css, and it has to be written, because the svg circle does not start at what we think is 0 degrees, but is offset by 90 degrees.

So we have to use css to turn him another 90 degrees!

.transform: rotate (- 90deg);}

Then we write some styles of the text and the main box by the way.

Auto;-main-box {position: relative; display: block; margin: 0 auto;} .count-num {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px; align-items: center; justify-content: center; display: flex; font-family: fantasy; font-size: 30px; color: # 333; user-select: none;}

So we get a static circular progress bar.

3. Animation and use of export default {name: "CircleProgress", / /. Mounted () {this.run ();}, methods: {run () {if (this.value = = 0) return; let t = this.duration / this.value this.timer = setInterval (() = > {if (this.now > = this.value) {return clearInterval (this.timer);} this.now++;}, t);}

We will calculate the number of + 1 execution time each time from the current animation execution time and the current value, and then execute it through setInterval until the progress value is reached. Finally, we are going to start using this component.

At this point, I believe you have a deeper understanding of "how to use svg to develop a circular progress bar component in vue2". 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.