@uxland/ui-progress-indicator

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.