I make progress indicator.
Initially I planned to play around with gradients, but it turned out (suddenly!) I needed support for IE9 . Tell me, please, an example of the implementation or direction for the search. I tried svg, but there, as far as I understand, the arc is already set through <path/> and the dots + do not understand how to attenuate the line.

enter image description here

 * { box-sizing: border-box; } .circle { width: 100px; height: 100px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, gray 60%, red); } .inner { width: 100%; height: 100%; border-radius: inherit; text-align: center; line-height: 90px; background-color: #fff; } 
 <div class="circle"> <div class="inner">13%</div> </div>

    2 answers 2

    For IE support, you can use libraries such as Snap.SVG and animate the stroke-dasharray with JS :

     var count = $(('#proc')); $({ Counter: 0 }).animate({ Counter: count.text() }, { duration: 5000, easing: 'linear', step: function () { count.text(Math.ceil(this.Counter)+ "%"); } }); var s = Snap('#animated'); var progress = s.select('#progress'); progress.attr({strokeDasharray: '0, 251.2'}); Snap.animate(0,251.2, function( value ) { progress.attr({ 'stroke-dasharray':value+',251.2'}); }, 5000); 
     #proc{ font-size:20; text-anchor:middle; } #anketa { font-size:18; fill:#CED0CF; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <svg id="animated" width="100%" height="40%" viewbox="0 0 500 200" preserveAspectRatio="xMidYMin meet"> <g transform="translate(0 0)"> <circle cx="50" cy="50" r="40" fill="none" stroke="#E1E4E3" stroke-width="2"/> <path id="progress" stroke-linecap="round" stroke-width="2" stroke="#FFA6A7" fill="none" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"> </path> </g> <text id="proc" x="50" y="50" dy="7" >100%</text> <text id="anketa" x="-180" y="50" >Анкета заполнена на</text> </svg>

      Here's how I finally solved the problem based on the answer from @Alexandr_TT . Maybe someone will come in handy.

       $('#progress-test').on('input', function() { $('#progress-bar').attr('stroke-dasharray', (301.6 * +this.value / 100) + ',301.6'); $('#percent').text(this.value + '%'); if (+this.value > 70) { $('#progress-bar').attr('stroke', '#f00'); } else { $('#progress-bar').attr('stroke', 'url(#gradient)'); } }) 
       .progress__val { fill: #7b7b7b; font-size: 20px; text-anchor: middle; } .progress__null, .progress__bar { fill: none; stroke-width: 2; } .progress__null { stroke: #e4e7eb; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input type="number" min="0" max="100" id="progress-test"> </p> <svg id="progress" width="100px" height="100px" viewbox="0 0 100 100" preserveAspectRatio="xMidYMin meet"> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="10%" gradientUnits="objectBoundingBox" gradientTransform="rotate(-50, .5, .5)"> <stop offset="0%" stop-color="red"></stop> <stop offset="100%" stop-color="#e4e7eb"></stop> </linearGradient> <g> <circle class="progress__null" r="48" cy="50" cx="50"></circle> <circle class="progress__bar" id="progress-bar" r="48" cy="50" cx="50" transform="rotate(-90 50 50)" stroke-dasharray="0,301.6" stroke="url(#gradient)"></circle> </g> <text dy="7" y="50" x="52" id="percent" class="progress__val">0%</text> </svg>

      • Well done Mastery grows (+) - Alexandr_TT
      • @Alexandr_TT, anyway with a gradient trouble. Do not give him the direction along the line. I saw, of course, a variant with a broken script into small segments and the assignment of separate gradients, but in my opinion, this is a bust. - zhurof
      • Ask a separate question. Give your code and describe in detail what you want to get at the output. I am sure someone will answer for sure if you complete the question well. as they say, a well-designed question, this is already half the solution - Alexandr_TT