оживляющий границу круга, чтобы заполнить

Question

Как бы вы идти о анимации (и создание) круги, как показано на картинке с JavaScript? Я не уверен, как это назвать, поэтому я просто сказал «граница».

Answer 1

Существует много способов сделать это, вот некоторые

JS/Canvas:

• http://p.ar2oor.pl/cprogress/
• http://anthonyterrien.com/knob/

CSS3:

• http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
• http://www.alessioatzeni.com/blog/css3-loading-animation-loop/

SVG:

• http://raphaeljs.com/

Answer 2

Вам нужно оживить элементы svg, привязанные к некоторым данным. Посмотрите на D3 Radial Progress Component. Этот компонент основан на d3.js, который является «библиотекой JavaScript для управления документами на основе данных».

Обратите внимание, что d3 действительно завершен и может быть излишним, если вы просто имеете дело с одной графикой. Но по крайней мере теперь вы знаете, что искать.