Before we start, let’s look at the following animation effect (codepen) :

There are many ways to do this, but I think using SVG is the easiest and quickest way to do it. In fact, it is a stroke animation effect, easy to implement, in the previous article also talked about a lot of stroke animation effect articles, such as SVG stroke animation basic knowledge, stroke combat, you can go to see some basic knowledge of stroke animation effect. Now let’s achieve the animation effect of the ring progress bar step by step.

This article is just a general analysis of the implementation ideas, detailed code can go to the original address to view.

To prepare two circles, use the SVG circle element directly, as follows:

< SVG id = "SVG" width = "200" height = "200" viewPort = "0 0 100 100" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < circle R ="90" cx="100" cy="100" Fill ="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> <circle ID ="bar" R ="90" cx="100" cy="100" Fill ="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> </ SVG >Copy the code

Once the basic graphics are ready, the effect is ready to write. The animations are done using the stroke-Dashoffset property and transition, and the key CSS code is the following:

#svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  stroke: #666;
  stroke-width: 1em;
}
Copy the code

The circle is animated with different numbers, which dynamically changes the stroke-dashoffset value of the border according to the numbers.

The first step is to get the value of the SVG node and text box to manipulate:

  var val = parseInt($(this).val());
  var $circle = $('#svg #bar');
Copy the code

To animate a stroke based on a number, you simply assign the user-entered value as a percentage of the entire circumference to stroke-Dashoffset. First, we need to get the circumference of the circle:

 var r = $circle.attr('r');
 var c = Math.PI*(r*2);
Copy the code

Note that the formula for calculating the circumference of a circle is used:

Math.PI*(r*2)
Copy the code

Get the perimeter of the circle, let’s calculate the ratio of the current value to the entire perimeter, and then use the CSS method to assign the strokeDashoffset value:

var pct = ((100-val)/100)*c;

$circle.css({ strokeDashoffset: pct});
Copy the code

A simple ring loading effect is done.

Did this article help you? Welcome to join the front End learning Group wechat group: