Installation

npm i @tryg/vue-ui-library

Usage

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

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');

YourComponent.vue

<template>
  <anchor-progress-bar label="Progress bar" value="50"></anchor-progress-bar>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorProgressBar } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-progress-bar label="Progress bar" value="50"></anchor-progress-bar>
</template>

Indeterminate

<template>
  <anchor-progress-bar label="Progress bar" indeterminate></anchor-progress-bar>
</template>

Reverse

<template>
  <anchor-progress-bar label="Progress bar" value="50" reverse></anchor-progress-bar>
</template>

Show percentage

<template>
  <anchor-progress-bar label="Progress bar" value="50" show-percentage></anchor-progress-bar>
</template>

Steps (experimental)

<template>
  <anchor-progress-bar label="Stepped progress bar" value="50" steps="4" step="2"></anchor-progress-bar>
</template>

Steps indeterminate (experimental)

<template>
  <anchor-progress-bar label="Connecting to wifi" steps="3" step="2" indeterminate></anchor-progress-bar>
</template>

Accessibility

Uses role="progressbar" with aria-valuenow, aria-valuemin="0", and aria-valuemax="100" to communicate progress to assistive technology.
The label prop is rendered with aria-labelledby, providing a descriptive context for the progress indicator.
When show-percentage is enabled, the percentage value is announced using an aria-live="polite" region.
The indeterminate state uses aria-busy="true" to indicate an ongoing process without a specific progress value.
Screen readers announce the label and current value, keeping users informed of the operation's status.

API

progress-bar

Properties

Property	Attribute	Description	Type	Default
`height`	`height`		`number`	`8`
`indeterminate`	`indeterminate`		`boolean`	`false`
`label`	`label`		`string`	`null`
`reverse`	`reverse`		`boolean`	`false`
`showPercentage`	`show-percentage`		`boolean`	`false`
`step`	`step`		`0 \| 1 \| 10 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`	`1`
`steps`	`steps`		`1 \| 10 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9`	`1`
`uuid`	`uuid`	Give this instance of button a custom ID, or keep the default.	`string`	`uuidv4()`
`value`	`value`		`0 \| 1 \| 10 \| 100 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18 \| 19 \| 2 \| 20 \| 21 \| 22 \| 23 \| 24 \| 25 \| 26 \| 27 \| 28 \| 29 \| 3 \| 30 \| 31 \| 32 \| 33 \| 34 \| 35 \| 36 \| 37 \| 38 \| 39 \| 4 \| 40 \| 41 \| 42 \| 43 \| 44 \| 45 \| 46 \| 47 \| 48 \| 49 \| 5 \| 50 \| 51 \| 52 \| 53 \| 54 \| 55 \| 56 \| 57 \| 58 \| 59 \| 6 \| 60 \| 61 \| 62 \| 63 \| 64 \| 65 \| 66 \| 67 \| 68 \| 69 \| 7 \| 70 \| 71 \| 72 \| 73 \| 74 \| 75 \| 76 \| 77 \| 78 \| 79 \| 8 \| 80 \| 81 \| 82 \| 83 \| 84 \| 85 \| 86 \| 87 \| 88 \| 89 \| 9 \| 90 \| 91 \| 92 \| 93 \| 94 \| 95 \| 96 \| 97 \| 98 \| 99`	`0`

Dependencies

Depends on

anchor-label

Graph

graph TD;
  anchor-progress-bar --> anchor-label
  style anchor-progress-bar fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Progress bar3.0