2

Как реализовать анимацию кругового прогресс бара на чистом javascript? Интересен момент, как сделать заполнение окружности цветом

Ilya Biryukov
  • 39
  • 2
    Здравствуйте! В вашем вопросе видно непонимание темы. Что значит реализовать на чистом javascript? когда внешний вид может задаваться с помощью стилей(css). Вам возможно нужно реализовать анимацию на js? Пока минус поставил вашему вопросу. Напишите подробнее, уберу минус. Всего доброго и хорошего вам дня! – Александр Казаков Nov 14 '17 at 23:15
  • codepen.io => поиск => radial progress bar Выбирайте какая реализация понятней/больше нравится. Пример https://codepen.io/nelsyeung/pen/MwdWmj – user271410 Nov 15 '17 at 01:22
  • Можно на css сделать... но по своему опыту скажу что это не лучшая идея. Не дури себе голову сделай на svg + js или canvas + js. А примеры на кодпене посмотри, как тебе уже подсказали. – Evgeniy Klimovich Nov 17 '17 at 23:16
  • https://ru.stackoverflow.com/a/676530/178988 - так? – Qwertiy Nov 17 '17 at 23:28
  • 1
    https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9 – entithat Jan 04 '18 at 19:53
  • 1
    Вот так, например: https://ru.stackoverflow.com/questions/628297/%D0%9A%D1%80%D1%83%D0%B3%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B9-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81-%D0%B1%D0%B0%D1%80 – humster_spb Jan 16 '18 at 07:04

1 Answers1

1

Добрый день.

Если коротко, то вы создаете круг, внутри центрируете еще один круг и со временем, круг внутри увеличиваете по ширине и высоте.

Сделал вам пример :
https://codepen.io/AndreyMyP/pen/Mrqbvx

<!-- Обертка, чтобы центрировать -->
<div class="wrapper wrapper__align-inside">
  <!-- Внешний круг -->
  <div class="circle circle__block circle_cosmetics">
    <!-- Процент загрузки в числе -->
    <div id="jsCount" class="circle__count circle__count_cosmetics">0 %</div>
    <!-- Внутренний круг  -->
    <div id="jsSize" class="circle__item circle__item_cosmetics"></div>
  </div>
</div>
Frog Frogov
  • 533