Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.

Vue 2 Loading Bar — прогресс бар для проектов на VueJS

Как и понятно из заголовка, речь пойдет о лоадер-компоненте, который можно применять совместно с асинхронными операциями в среде Vue.

Описание loader-компонента VueJS

Простой и удобный инструмент, который добавит в Ваш проект симпатичную полосу загрузки с полной кастомизацией. В демо показана работа компонента: процесс загрузки и удачная\не удачная операция.

Установка и использование

Инсталлируем с помощью NPM:

npm install vue2-loading-bar

Добавляем в Ваш HTML:

<loading-bar
  id="loading-bar-id"
  custom-class="custom-class"
  :on-error-done="errorDone"
  :on-progress-done="progressDone"
  :progress="progress"
  :direction="direction"
  :error="error" >
</loading-bar>

Описания входных параметров

id (String)

кастомный Id в vue2-loading-bar компоненте

customClass (String)

кастомный className в vue2-loading-bar компоненте

progress (Number)

Прогресс в процентах

direction (String)

Направление анимации. Доступны положения 'right' или 'left' по умолчанию 'right'

error (Boolean)

Индикатор для отображения состояния ошибки

onErrorDone (Function, required)

Следует ли изменить родительское состояние, когда прогресс бар закончил с состоянием ошибки

onProgressDone (Function, required)

Должно ли netralize состояние выполнения родителя быть 0