<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