0.1.0-alpha.3 • Published 3 years ago
@uxland/ui-progress-indicator v0.1.0-alpha.3
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-indicatorNOTE: 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. |
0.1.0-alpha.1
3 years ago
0.1.0-alpha.0
3 years ago
0.1.0-alpha.3
3 years ago
0.1.0-alpha.2
3 years ago
0.0.1-alpha.0
3 years ago