We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-spinner size="large"></anchor-spinner>
</template>

<script setup>
import { AnchorSpinner } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-spinner size="large"></anchor-spinner>
</template>

Note: Spinner adds Loading as aria-label by default. This is required for accessibility. You can change it by passing a loading-text or aria-label prop.

Sizes

Pass the size prop with value xsmall, small, medium, large or xlarge to display the spinner with different sizes.

<template>
  <anchor-spinner size="xsmall"></anchor-spinner>
  <anchor-spinner size="small"></anchor-spinner>
  <anchor-spinner size="medium"></anchor-spinner>
  <anchor-spinner size="large"></anchor-spinner>
  <anchor-spinner size="xlarge"></anchor-spinner>
</template>

Colors

The spinner will be colored by 'currentColor' of its parent element. If you want to set the color of the spinner specifically, you can set the text color of the parent element or directly for the Spinner.

<style>
  .color-item:nth-child(1) { color: red; }
  .color-item:nth-child(2) { color: green; }
  .color-item:nth-child(3) { color: blue; }
  .color-item:nth-child(4) { color: yellow; }
  .color-item:nth-child(5) { color: fuchsia; }
</style>
<template>
  <div class="color-item"><anchor-spinner size="xsmall"></anchor-spinner></div>
  <div class="color-item"><anchor-spinner size="small"></anchor-spinner></div>
  <div class="color-item"><anchor-spinner size="medium"></anchor-spinner></div>
  <div class="color-item"><anchor-spinner size="large"></anchor-spinner></div>
  <div class="color-item"><anchor-spinner size="xlarge"></anchor-spinner></div>
</template>

Stroke width

<template>
  <anchor-spinner stroke-width="20"></anchor-spinner>
</template>

Accessibility

• Uses role="status" with an aria-live region (default polite, configurable to assertive or off) to announce loading state to screen readers.
• The spinner SVG itself is hidden from screen readers using aria-hidden="true", with the loading announcement delivered through a visually hidden span element.
• Defaults to aria-label="Loading" for the loading announcement. Customize the announcement text using the loading-text prop.
• The aria-live prop controls the politeness level, allowing urgent loading states to interrupt screen reader output when needed.
• The visual-only animation does not interfere with screen reader users, as the spinning motion is not conveyed assistively.

API

Spinner

Properties

CSS Custom Properties

Dependencies

Used by

• anchor-button

Graph

graph TD;
  anchor-button --> anchor-spinner
  style anchor-spinner fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS