UXL Progress Indicator Component

IMPORTANT: The Uxland UI Web Components are a work in progress and subject to major changes until 1.0 release.

Installation

npm i @uxland/ui-progress-indicator

NOTE: The Uxland UI Web Components are distributed by Uxland Company and are free to use Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11.

Usage

Default Spinner

<uxl-progress-indicator></uxl-progress-indicator>

Spinner with text

<uxl-progress-indicator .text="Im Busy!"></uxl-progress-indicator>

Bouncing progress

<uxl-progress-indicator .type="bouncing"></uxl-progress-indicator>

Linear progress

<uxl-progress-indicator .type="linear"></uxl-progress-indicator>

API

Properties/Attributes

| Name | Type | Default | Description | | ------ | -------- | ----------- | ------------------------------------------------------------------------- | | type | string | 'spinner' | The type of progress indicator. Can be circular, linear or bouncing | | text | string | '' | Label to display under circular progress. |

Methods

None

Events

None

CSS Custom Properties

| Name | Default | Description | | ---------------------------- | --------------------- | ------------------------------------------------------------------- | | --progress-color | #009688 | Color for spinner and bouncing. | | --spinner-stroke | 3px | Spinner stroke. | | --spinner-width | 30px | Spinner width. | | --spinner-height | 30px | Spinner height. | | --spinner-background-color | transparent | Spinner container background color. | | --title-color | rgba(0, 0, 0, 0.87) | Spinner title color. | | --title-font-size | 1rem | Spinner title font-size. | | --title-font-weight | light | Spinner title font-weigth. | | --bouncing-ball-width | 10px | Width of bouncing ball. | | --bouncing-ball-height | 10px | heigth of bouncing ball. | | --linear-width | 100% | Width of linear progress. | | --linear-color | 0, 150, 136 | RGB color of linear progress. Don't pass tgb function, only 3 args. |