@uxland/uxl-progress-indicator
TypeScript icon, indicating that this package has built-in type declarations

3.0.4 • Public • Published

<uxl-progress-indicator>

A progress indicator component

Build Status npm version

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Description

<uxl-progress-indicator> is a component that provides two types of material design based progress indicators with optional message:

  • Circular spinner:
  • Bouncing balls:

Options

If you want to personalize, you can use options. These options are typed as UxlProgressIndicatorOptions

  1. type: String Specifies the spinner type

    Possible values: "spinner", "bouncing"

    Default value: "spinner"

  2. text: String Specifies the message of spinner

    Default value: undefined

  3. position: String Specifies the position between the spinner and the message

    Possible values: "vertical", "horizontal", "vertical-reverse", "horizontal-reverse"

    Default value: "vertical"

  4. fit: Boolean Specifies whether the spiner's position is centered fixed in the screen or not

    Possible values: "true" or "false"

    Default value: "false"

###Custom CSS properties

<uxl-progress-indicator> provides the following custom properties for styling:

Custom property Description Default
--uxl-progress-indicator-spinner-width: spinner width 30px
--uxl-progress-indicator-spinner-height: spinner height 30px
--uxl-progress-indicator-spinner-stroke spinner stroke 3px
--uxl-progress-indicator-color Color of the spinner #009688
--uxl-progress-indicator-background-color background color transparent
--uxl-progress-indicator-bouncing-ball-width bouncing balls width 10px
--uxl-progress-indicator-bouncing-ball-height bouncing balls width 10px
--uxl-progress-indicator-title-color font color for message rgba(0, 0, 0, 0.87)
--uxl-progress-indicator-title-size font size for message 1rem
--uxl-progress-indicator-title-weight font weight for message light

###Demo

You can see the demos:

url: localhost/components/uxl-progress-indicator/demo/index.html

Readme

Keywords

Package Sidebar

Install

npm i @uxland/uxl-progress-indicator

Weekly Downloads

13

Version

3.0.4

License

Apache-2.0

Unpacked Size

18.6 kB

Total Files

19

Last publish

Collaborators

  • danielcabiscol
  • uxland-admin