webakira/CircleProgressBar

Круглый прогресс бар который можно анимировать.

Circle Progress Bar

Круглый прогресс бар который можно анимировать.

Посмотреть демо

HTML разметка

<div>
	
	<div class="skill" data-cpb="200,100,20,10" data-cpb-animate="3000,0,easeInOutBack">
		<div class="skill__outer" data-cpb-outer>
			<div class="skill__inner" data-cpb-inner>
				<div class="skill__number" data-cpb-number>
				</div>
			</div>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<circle></circle>
		</svg>
	</div>
	
</div>

Описание аттрибутов

data-cpb="size,percent,innerBarSize,outerBarSize"

Это обязательный аттрибут, для работы прогресс бара. Все его значения необходимо заполнить.

• size - Высота и ширина прогресс бара
• percent - Процент заполнения прогресс бара
• innerBarSize - Ширина линии, которая будет заполняться
• outerBarSize - Ширина линии, которая будет всегда заполнена на 100%

data-cpb-outer

Это обязательный аттрибут. Необходим для просчета внутренней ширины и высоты, учитывая ширину outerBarSize.

data-cpb-inner

Это обязательный аттрибут. Необходим для просчета внутренней ширины и высоты, учитывая ширину innerBarSize и outerBarSize.

data-cpb-number

Это обязательный аттрибут. Сюда вставляются проценты percent.

data-cpb-animate="duration,delay,property"

Это НЕ обязательный аттрибут. Отвечает за анимированное заполнени.

• duration - Длительность анимации
• delay - Задержка перед стартом
• property - Тип анимации (Типы анимации смотрите ниже)

data-cpb-animate-stop

Это НЕ обязательный аттрибут. Отвечает за запуск анимации по событию.

Типы анимации

Примеры всех анимаций

• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBounce
• easeOutBounce
• easeInOutBounce

JS Запуск анимации по событию

Часто бывают задачи, когда нужно запустить анимацию по определённому событию.

Для этого:

1. Добавляем аттрибут data-cpb-animate-stop к нужному прогрессбару;
2. При срабатывагии нужного события, удаляем, у конкретного прогрессбара, аттрибут data-cpb-animate-stop;
3. Запускаем функцию прогрессбара, только для текущего элемента;

! Важно - Функция прогрессбара progressBarStart(array) принимает только массивы.

Выглядеть это будет примерно так:

HTML

	<div class="skill" data-cpb-animate-stop data-cpb="200,100,20,10" data-cpb-animate="3000,0,easeInOutBack">
		...
	</div>

JS

	const startElements = document.querySelectorAll('[data-cpb-animate-stop]');
	if (startElements.length > 0) {
		startElements.forEach(el => {
			el.addEventListener('click', function (e) {
				if (el.getAttribute('data-cpb-animate-stop') != null) {
					el.removeAttribute('data-cpb-animate-stop');
					progressBarStart([el]);
				}
			});
		});
	}

---

Структура GULP

Как запустить

1. Устанавливаем Node.js
2. Копируем все файлы из репозитория на ваш PC
3. Запускаем консоль в той папке, куда вы скачали все файлы
4. Устанавливаем все необходимые пакеты с помощью команды: npm i
5. Запускаем сборку с помощью команды: gulp

Иерархия файлов

• #src
  • fonts
  • html
    • _head.html
    • _index.html
    • _scripts.html
  • img
  • js
    • plugins
    • function.js
    • scripts.js
  • scss
    • basis
      • _FONTS.scss
      • _MIXINS.scss
      • _NULL.scss
    • plugins
    • element-theme.scss
    • element.scss
    • visual-page.scss
    • style.scss
  • index.html
• dist
• public
• node_modules
• .gitignore
• README.md
• gulpfile.js
• package-lock.json
• package.json

---

#src

Папка #src предназначина для удобной разработики элементов для будующих проектов. Именно из этой папки собираются папки dist и public

1. fonts

   Здесь размещен основной шрифт, который я использую.

2. html

   Сюда входят три файла, которые подключаются в файле index.html

   • _head.html - Тут содержание тега , а также подключение css файлов
   • _index.html - Тут вся разметка элемента
   • _scripts.html - Тут подключаю все необходимые скрипты

3. img

   Тут могут находится необходимые для работы элемента изображения

4. js

   Сюда входят два файла и папка для плагинов

   • plugins - Папка для хранения неободимых плагинов
   • function.js - Функция, где описана логика работы созданного элемента
   • scripts.js - Запуск js кода

5. scss

   Стили для демонстрации и работы элемента

   • basis - Папка для основных настроек страницы
     • _FONTS.scss - Подключение шрифта
     • _MIXINS.scss - Подключение миксинов
     • _NULL.scss - Обнуление стилей
   • plugins - Папка для хранения неободимых плагинов
   • element-theme.scss - Стили для визульного оформления элемента
   • element.scss - Стили, необходимые для работы элемента
   • visual-page.scss - Стили, для оформления страницы демонстрации
   • style.scss - Тут подключаюстся все вышеперечисленные стили

6. index.html

   Основная HTML разметка всей страницы. Тут подключаются три файла: _head.html, _index.html, _scripts.html.

---

dist

Папка dist предназначина для удобного копирования, лишь необходимых для работы элемента, файлов.

element-theme.scss - Эти стили можно не копировать, если хотим реализовать полностью свой визуальный стиль.

---

public

Папка public предназначина для демонстрации работы элемента.

---

Остальные файлы

Нижеперечисленные файлы предназначены для запуска GULP сборки и/или github. Для работы элемента они не нужны. Все необходимые файлы для работы элемента находятся в папке dist .

• node_modules
• .gitignore
• README.md
• gulpfile.js
• package-lock.json
• package.json

---