• Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта

Vue-progressbar — легковесный лоадер для приложений на VueJS

Если у Вас одностраничное приложение, то Вам определенно понадобиться индикатор загрузки компонентов и контента в них. Можно начать строить велосипед и сделать прогресс-бар самому. А можно просто взять готовое великолепное решение.

С чем имеем дело

Vue-progressbar — это простое и изящное расширение для проектов, создаваемых с помощью фреймворка VueJS. Его задача — показать пользователю текущий прогресс загрузки данных. В данном случае, элемент выполнены в современном стиле: быстро бегущая цветная полоса сверху страницы. Похожее можно встретить на многих популярных сайтах.

Как начать пользоваться

Установка:

$ npm install vue-progressbar

В main.js указываем:

import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'rgb(143, 255, 199)',
  failedColor: 'red',
  height: '2px'
})

В App.vue копируем:

<template>
    <div id="app">
        <!-- for example router view -->
        <router-view></router-view>
        <!-- set progressbar -->
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

К примеру, в дочерних компонентах делаем что-то асинхронное:

<script>
export default {
  methods:{
    start () {
        this.$Progress.start()
    },
    set (num) {
        this.$Progress.set(num)
    },
    increase (num) {
        this.$Progress.increase(num)
    },
    decrease (num) {
        this.$Progress.decrease(num)
    },
    finish () {
        this.$Progress.finish()
    },
    fail () {
        this.$Progress.fail()
    },
    test(){
      this.$Progress.start()

      this.$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?apikey=7waqfqbprs7pajbz28mqf6vz')
      .then((response) => {
          this.$Progress.finish()
      }, (response) => {
          this.$Progress.fail()
      })
    }
  }
}
</script>

Заключение

На страничке проекта Github можно найти подробное описание API плагина, а также его взаимодействие с api-axios.js.

В категории «прогресс баров» для VueJS, библиотека Vue-progressbar является оптимальной в плане конфигураций и быстродействия.