<uxl-progress-indicator>

A progress indicator component

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