Для создания анимации загрузки в Nuxt.js у вас есть несколько вариантов.
Первый вариант - использование CSS анимации. Вы можете создать CSS анимацию с помощью ключевых кадров (@keyframes) и применить ее к элементам, которые нужно анимировать во время загрузки. В Nuxt.js вы можете добавить стили для анимации в файле компонентов или в файле с глобальными стилями.
Например, давайте создадим анимацию спиннера. В вашем файле стилей (например, assets/css/loader.css) добавьте следующий код:
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spinner 1s linear infinite;
}
Затем, в компоненте, где вы хотите показать анимацию загрузки, добавьте следующий код:
<template>
<div class="loader">
<div class="spinner"></div>
</div>
</template>
Второй вариант - использование пакета, поддерживающего анимации загрузки, такого как "vue-spinner". Этот пакет предоставляет готовые компоненты, которые вы можете использовать для создания анимаций загрузки. Установите пакет с помощью npm или yarn:
npm install vue-spinner
Затем, импортируйте нужный компонент в ваш компонент:
import { Spinner } from 'vue-spinner/dist/vue-spinner.min.js';
<template>
<div class="loader">
<Spinner></Spinner>
</div>
</template>
Третий вариант - использование пакета, такого как "nuxt-loading". Этот пакет позволяет вам показывать анимацию загрузки автоматически во время выполнения запросов или переходов между страницами. Установите пакет с помощью npm или yarn:
npm install nuxt-loading
Затем, добавьте настройки в ваш файл nuxt.config.js:
module.exports = {
modules: [
'nuxt-loading'
],
loading: {
color: 'blue',
height: '5px'
}
}
Теперь, при выполнении запросов или переходах между страницами, будет показываться анимация загрузки с указанными цветом и высотой.
Это лишь несколько примеров того, как можно создать анимацию загрузки в Nuxt.js. Вы можете выбрать подход, который больше всего соответствует вашим потребностям и требованиям проекта.