How to implement the Animation of the selection of the sector of a circle (filling in the circle with color from 0 to a certain value)?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
17 views
Figuratively, the process can be illustrated by the analogue clock: one arrow is fixed, another moves up to a certain value and the space between them is filled with color (arrows in this case no, it's just shaped visualization of the borders).
by | 17 views

3 Answers

0 like 0 dislike
Can try to make svg can draw on a canvas. jQuery you here not the assistant. Properties of a circle and the circumference.
\rhttps://codepen.io/Profesor08/pen/QQQeJp
by
0 like 0 dislike
make it 2 svg circle
1 circle - unfilled circle
2 circle - simulated filled in, the JavaScript manage the attributes stroke-dasharray, stroke-dashoffset(if necessary), transform to rotate

have stroke-dasharray there is a dash(hell, it will be the filling) and gap(space) their you need to calculate
an example of my code from a project on vuejs
.order-status-wrap svg.order-status(viewBox="0 0 166 166") circle(cx="83" cy="83" r="78" fill="none" stroke="#3a3a3f" stroke-width="10") circle(cx="83" cy="83" r="73" fill="none" stroke="#4dc54f" v-bind:stroke-dasharray="dash+' '+gap" stroke-dashoffset="" stroke-width="5" transform="rotate(-90 83 83)") .order-status-text .order-status-label Order is made on .order-status-percent {{orderPercent}} % \r\r\rexport default {\rdata() {\rreturn {\rorderSteps: 7, // кол-во шагов оформления заказа\rorderStepsComplete: 2, // кол-во пройденных шагов\rcircleRadius: 73, // радиус окружности\r}\r},\rcomputed: {\rorderPercent () { // процент выполнения заказа\rreturn Math.round(this.orderStepsComplete/(this.orderSteps/100))\r},\rcircleLength () { // длина окружности\rreturn this.circleRadius*2*Math.PI;\r},\rdash () { // черта\rreturn this.circleLength/100*this.orderPercent;\r},\rgap () { // пробел\rreturn this.circleLength-this.dash;\r},\r},\r}\r

well, screw the setInterval for animation
by
0 like 0 dislike
Can be done on svg. The fill is essentially a circle half the radius of the super-thick line, with a thickness of half the radius. An example of a fill is not so thick line.
by

Related questions

0 like 0 dislike
1 answer
asked Apr 3, 2019 by pettson
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users