No Proscribed Meaning

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.4 • Public • Published


    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.


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

    • Circular spinner:
    • Bouncing balls:


    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


    You can see the demos:

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


    npm i @uxland/uxl-progress-indicator

    DownloadsWeekly Downloads






    Unpacked Size

    18.6 kB

    Total Files


    Last publish


    • avizcaino
    • uxland-admin