Fisht

Loading

Компонент Loading предоставляет настраиваемые анимированные индикаторы загрузки, включая SVG, EpicSpinners и простой резервный вариант.

Обзор

Компонент Loading — это универсальный и настраиваемый индикатор загрузки, поддерживающий несколько типов анимации. Он помогает указывать состояния загрузки в вашем приложении и может быть легко стилизован и настроен для соответствия вашей системе дизайна.

Основное использование

Чтобы использовать спиннер загрузки, просто предоставьте prop type с именем загрузчика:

<Loading />

Тип

Определяет имя анимации загрузки для использования.

Если предоставленный тип соответствует известному загрузчику Epic или SVG, он будет отрендерен соответствующим образом. В противном случае он переключится на загрузчик по умолчанию "simple".

Длительность анимации

Указывает, как долго длится цикл анимации в миллисекундах. Настройте это, чтобы ускорить или замедлить анимацию.

  • Тип: number — обычно одно из: 1000, 1200, ...
  • По умолчанию: Зависит от типа загрузчика.
300ms
500ms
1000ms
2000ms
5000ms
9000ms 
<Loading type="dot-revolve" :animationDuration="2000" />

В этом примере анимация замедляется до 2 секунд на цикл.

Размер

Устанавливает размер загрузчика в пикселях.

  • Тип: number — обычно: 40, 50, 55, 60, 64, 65, 66, 70

Этот размер применяется как к ширине, так и к высоте.

25px
30px
40px
50px
60px 
<Loading type="circular" :size="50" />

Это отрендерит загрузчик с шириной и высотой 50px.

Цвет

Определяет цвет анимации загрузчика. Принимает любую допустимую строку цвета CSS.

red
green
blue
yellow
pink
purple
<Loading type="circular" color="#4F46E5" />

Это отрендерит спиннер в индиго.

Класс

Позволяет применять пользовательские CSS классы к контейнеру загрузчика для целей макета и стилизации.

<Loading type="line-scale" class="custom-class" />

Поведение резервного варианта

Если указанный type не распознан ни в EpicSpinners, ни в SVG Loaders, компонент:

  • Запишет предупреждение в консоль.
  • Переключится на загрузчик по умолчанию "simple".
<Loading type="unknown-loader" />

Полный список доступных загрузчиков

Вы можете найти полный список доступных загрузчиков здесь:

EpicSpinners

Коллекция настраиваемых анимированных спиннеров, написанных на чистом CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
SVG Loaders

Набор легковесных анимаций загрузки на основе SVG.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
© 2025 FishtVue by Egoka