ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/docs/components/progress-indicator/overview.md
Pavlik Kiselev 11bbc5fff5
feat: migrated the navigation metadata from inline MD title decorations to frontmatter 
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter

* fix: fixed frontmatter metadate for api-table MDs

* fix: fixed frontmatter eslint issue
2025-03-19 10:08:22 +01:00

1.1 KiB
Raw Blame History

parts title eleventyNavigation
Progress Indicator
Overview
Progress Indicator: Overview
key order parent title
Progress Indicator: Overview 10 Progress Indicator Overview

Progress Indicator: Overview

A web component that implements accessibility requirements for progress indicators.

import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-progress-indicator.js';

<lion-progress-indicator aria-label="Interest rate" value="50"></lion-progress-indicator>

Features

This component is designed to be extended in order to add visuals.

  • Can be indeterminate or determinate, depending on whether it has a value.
  • Accessibility compliant
  • Localized "Loading" label in case of an indeterminate progress-indicator
  • Implementation independent of visuals
  • value: progress value, setting this makes the progress-indicator determinate.
  • min: progress min value
  • max: progress max value

Installation

npm i --save @lion/ui

import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
// or
import '@lion/ui/define/lion-progress-indicator.js';