Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

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

Путь прогресса Vue

Пакет Vue Progress Path позволяет нам отображать индикатор выполнения с различными формами без особых проблем.

Он доступен как пакет Node. Мы можем добавить это следующим образом:

npm i --save vue-progress-path

Тогда мы можем использовать его следующим образом:

main.js

import Vue from "vue";
import App from "./App.vue";
import "vue-progress-path/dist/vue-progress-path.css";
import VueProgress from "vue-progress-path";
Vue.use(VueProgress, {
  defaultShape: "circle"
});
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <loading-progress
      :progress="progress"
      :indeterminate="indeterminate"
      :counter-clockwise="true"
      :hide-background="false"
      shape="semicircle"
      size="64"
    />
    <button @click="progress++">next</button>
    <button @click="indeterminate = !indeterminate">indeterminate</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      progress: 0,
      indeterminate: false
    };
  }
};
</script>

В приведенном выше коде у нас есть компонент loading-progress, который импортируется из компонента vue-progress-path.

Мы зарегистрировали плагин, вызвав метод Vue.use.

Затем в App.vue мы использовали компонент loading-progress с различными параметрами.

Параметр progress - это число, обозначающее достигнутый прогресс, и оно отображается на индикаторе выполнения в виде заполненного индикатора выполнения.

indeterminate - логическое значение, указывающее, что индикатор выполнения работает вечно.

counter-clockwise - это логическое значение, которое указывает, показывает ли индикатор выполнения цвет хода выполнения, движущийся против часовой стрелки.

hide-background - это логическое значение, указывающее, хотим ли мы скрыть фон фонового изображения.

shape - строка для обозначения формы. size - размер индикатора выполнения в пикселях.

Теперь, когда мы нажимаем «Далее», мы видим, что зеленая часть индикатора выполнения включается и выключается.

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

Кнопка загрузки Vue

Пакет кнопки загрузки Vue представляет собой простую ширину, которая добавляет значок загрузки к кнопке.

Для его установки запускаем следующий код:

npm install --save vue-loading-button

Тогда мы можем использовать его следующим образом:

<template>
  <div id="app">
    <VueLoadingButton
      :loading="loading"
      aria-label="button"
      @click.native="loading = !loading"
    >button</VueLoadingButton>
  </div>
</template>
<script>
import VueLoadingButton from "vue-loading-button";
export default {
  name: "App",
  components: {
    VueLoadingButton
  },
  data() {
    return {
      loading: false
    };
  }
};
</script>

В приведенном выше коде мы импортировали пакет vue-loading-button в наш компонент, а затем зарегистрировали его в свойстве components нашего объекта компонента.

Затем мы использовали его следующим образом:

<VueLoadingButton
  :loading="loading"
  aria-label="button"
  @click.native="loading = !loading"
>button</VueLoadingButton>

Мы устанавливаем опору loading в поле loading, чтобы мы могли включать и выключать счетчик загрузки.

Затем у нас есть обработчик click.native, чтобы мы могли запускать наш код обработчика событий щелчка при нажатии кнопки.

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

Мы также можем добавить свойство styled, которое является логическим, чтобы указать, хотим ли мы включить его встроенные стили.

Скелет туберкулеза

Пакет TB Skeleton позволяет нам создавать скелет экрана, когда данные загружаются на нашу страницу.

Скелетный экран - это место, где мы видим серые движущиеся блоки на экране во время загрузки страницы.

Мы можем установить, запустив:

npm install --save tb-skeleton

Тогда мы можем использовать его следующим образом:

main.js

import Vue from "vue";
import App from "./App.vue";
import skeleton from "tb-skeleton";
import "tb-skeleton/dist/skeleton.css";
Vue.use(skeleton);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <skeleton :theme="opacity" :shape="radius" bg-color="#dcdbdc" duration="3">
      <tb-skeleton width="30%" :aspect-ratio="0.1" :shape="circle" bg-color="#eee"></tb-skeleton>
      <tb-skeleton width="30%" :aspect-ratio="0.1"></tb-skeleton>
      <tb-skeleton width="30%" :aspect-ratio="0.1" bg-color="#eee"></tb-skeleton>
    </skeleton>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

В приведенном выше коде мы зарегистрировали плагин с помощью:

import "tb-skeleton/dist/skeleton.css";
Vue.use(skeleton);

для регистрации компонентов, входящих в комплект.

Тогда у нас есть:

<skeleton :theme="opacity" :shape="radius" bg-color="#dcdbdc" duration="3">
  <tb-skeleton width="30%" :aspect-ratio="0.1" :shape="circle" bg-color="#eee"></tb-skeleton>
  <tb-skeleton width="30%" :aspect-ratio="0.1"></tb-skeleton>
  <tb-skeleton width="30%" :aspect-ratio="0.1" bg-color="#eee"></tb-skeleton>
</skeleton>

добавить ящики для экрана-скелета. Мы изменили width на 30% от srceen. aspect-ratio для регулировки соотношения сторон ящиков. shape, чтобы изменить круг. и bg-color, чтобы изменить цвет фона.

Заключение

Пакет Vue Progress Path позволяет отображать индикатор выполнения в различных формах.

Пакет Vue Loading Button позволяет нам создать кнопку с индикатором загрузки, чтобы показать, что что-то загружается.

Наконец, пакет TB Skeleton позволяет нам создать скелет страницы с несколькими полями, чтобы показать, что страница загружается.