Spinner

Import Permalink to "Import"

import ProximaSpinner from 'proxima-vue/spinner';

Playground Permalink to "Playground"

import ProximaSpinner from 'proxima-vue/spinner';

<ProximaSpinner
  label="Loading"
/>

Accessibility Permalink to "Accessibility"

У спиннера нет специальной роли, используйте его внутри живой области, чтобы вспомогательные технологии видели изменения, после загрузки дополнительно уведомляйте пользователя или перемещайте фокус на интерактивные элементы. The spinner does not have a special role. You should use it within a live aria so that assistive technologies can see the changes, provide additional notification to the user after loading, or move focus to interactive elements.

<div role="status">
  <ProximaSpinner
    v-if="isPending"
    label="Content is loading"
    label-visually-hidden
  />
  <p v-else class="visually-hidden">Content is loaded</p>
</div>

BEM Permalink to "BEM"

Блок компонента spinner, модификаторы (создаются автоматически на основе пропсов): Component block spinner, modifiers (automatically created based on props):

• spinner_has_label
• spinner_label_under spinner_label_aside
• spinner_size_xxs spinner_size_xs spinner_size_s spinner_size_normal spinner_size_m spinner_size_l spinner_size_xl spinner_size_xxl
• spinner_theme_[name]

CSS Permalink to "CSS"

Слой компонента @layer proxima.spinner, также вы можете гибко cтилизовать компонент через кастомные свойства: Component layer @layer proxima.spinner, also you can style the component flexibly through custom properties:

--spinner-color: inherit;
--spinner-stroke-width: 3;

/* Label */
--spinner-label-line-height: 1.2;
--spinner-label-text-align: center;
--spinner-label-color: inherit;

/*
  Sizes
*/

--spinner-size-xxs: 1rem;
--spinner-label-font-size-xxs: 0.75rem;

--spinner-size-xs: 1.25rem;
--spinner-label-font-size-xs: 0.75rem;

--spinner-size-s: 1.5rem;
--spinner-label-font-size-s: 0.875rem;

/* Normal */
--spinner-size: 2rem;
--spinner-label-font-size: 1rem;

--spinner-size-m: 2.25rem;
--spinner-label-font-size-m: 1.125rem;

--spinner-size-l: 2.5rem;
--spinner-label-font-size-l: 1.25rem;

--spinner-size-xl: 3rem;
--spinner-label-font-size-xl: 1.5rem;

--spinner-size-xxl: 4rem;
--spinner-label-font-size-xxl: 2rem;

Theme Permalink to "Theme"

Используя кастомные свойства и специальный пропс theme можно легко создавать свои темы: By using custom properties and the prop theme, you can easily create your own themes:

<ProximaSpinner
  label="Content is loading"
  theme="dim"
/>

.spinner_theme_dim {
  --spinner-color: rgba(107, 107, 107, 0.9);
  --spinner-label-color: #777;
}

Props Permalink to "Props"

interface ProximaSpinnerProps {
  id?: string
  label?: string
  labelPosition?: 'under' | 'aside'
  labelVisuallyHidden?: boolean
  size?: ProximaSize
  theme?: string
}

Slots Permalink to "Slots"

<ProximaSpinner>
  <template #prepend>
    you code (prepend to inner)
  </template>

  <template #label="{ label }">
    you code (replaced label text)
  </template>
</ProximaSpinner>