QSpinner спиннеры

Компонент QSpinner в библиотеке Quasar используется для отображения индикаторов загрузки. Он позволяет визуально информировать пользователя о процессе выполнения асинхронных операций. QSpinner можно применять как самостоятельный элемент или в составе других компонентов, таких как QBtn, QDialog, QCard, обеспечивая гибкую кастомизацию.

Каждый спиннер основан на SVG-анимации или CSS-анимации в зависимости от выбранного типа, что обеспечивает плавность и производительность.

Подключение и базовое использование

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

import { QSpinner } from 'quasar'

Простейший пример использования:

<q-spinner color="primary" size="50px" />

Параметры:

  • color – задает цвет спиннера. Можно использовать стандартные цвета Quasar (primary, secondary, accent и т.д.).
  • size – диаметр спиннера. Принимает значения в пикселях (px) или относительные единицы (em, rem).
  • thickness – толщина линии спиннера, например 4px.
  • indeterminate – булево значение, указывающее, что спиннер показывает неопределенный процесс (анимированное вращение).

Виды спиннеров

Quasar предоставляет несколько встроенных вариантов спиннеров, каждый из которых имеет собственный стиль анимации:

  1. QSpinnerDots – набор точек, которые появляются и исчезают по кругу.
  2. QSpinnerBars – вертикальные или горизонтальные полосы с анимацией увеличения и уменьшения.
  3. QSpinnerHourglass – песочные часы, имитирующие течение времени.
  4. QSpinnerGears – шестерни, вращающиеся в композиции.
  5. QSpinnerFacebook – имитация индикатора загрузки, используемого в социальных сетях.
  6. QSpinnerInstagram – спиннер с динамической градиентной анимацией.

Выбор спиннера зависит от визуального стиля приложения и контекста загрузки.

Настройка анимации и цвета

Спиннеры Quasar позволяют гибко управлять внешним видом с помощью CSS-переменных и пропсов:

<q-spinner-dots
  size="60px"
  color="accent"
  :thickness="6"
  class="my-spinner"
/>
.my-spinner {
  --q-spinner-color: #ff5722;
  --q-spinner-size: 70px;
}
  • --q-spinner-color – изменяет цвет спиннера через CSS.
  • --q-spinner-size – позволяет контролировать размер без изменения пропса size.

Использование QSpinner с условным отображением

Часто спиннер нужен только во время загрузки данных. Для этого применяется условный рендеринг через v-if или v-show:

<template>
  <div>
    <q-spinner-bars v-if="loading" color="primary" size="40px" />
    <div v-else>
      Данные загружены
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    setTimeout(() => this.loading = false, 3000)
  }
}
</script>

Интеграция с QDialog и QCard

Спиннеры часто применяются внутри модальных окон и карточек для отображения состояния загрузки контента:

<q-dialog v-model="dialog">
  <q-card style="min-width: 300px; min-height: 150px;">
    <q-card-section class="row justify-center items-center">
      <q-spinner-hourglass color="secondary" size="50px" />
    </q-card-section>
  </q-card>
</q-dialog>

Настройка скорости анимации

С помощью CSS-переменной --q-spinner-speed можно менять скорость вращения или анимации спиннера:

.q-spinner-dots {
  --q-spinner-speed: 1.5s;
}

Значение указывается в секундах (s) или миллисекундах (ms), что позволяет адаптировать анимацию под UX приложения.

Комбинирование с кнопками

QSpinner часто используется в кнопках для отображения процесса действия:

<q-btn
  :loading="loading"
  label="Сохранить"
  color="primary"
  @click="saveData"
/>

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

Адаптивность и масштабирование

Все спиннеры Quasar масштабируются пропсами size и thickness, а также адаптируются к темной и светлой темам через глобальные переменные цвета ($primary, $accent). Это позволяет создавать единый визуальный язык для всех компонентов интерфейса.

Создание кастомного спиннера

Можно создавать свои спиннеры, используя QSpinner как базовый компонент и подключая собственные SVG-анимации или CSS-анимации:

<q-spinner
  class="custom-spinner"
  size="80px"
  color="purple"
/>

<style>
.custom-spinner svg circle {
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}
</style>

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

Резюме ключевых возможностей QSpinner

  • Множество встроенных стилей и анимаций.
  • Полная кастомизация через пропсы и CSS-переменные.
  • Интеграция с кнопками, модальными окнами и карточками.
  • Поддержка условного отображения и управления состоянием загрузки.
  • Возможность создания полностью кастомных спиннеров.

Эти возможности делают QSpinner универсальным инструментом для визуализации процессов в интерфейсе, обеспечивая плавность и эстетичность анимаций при минимальной нагрузке на приложение.

Оглавление