<etools-loading>

Loading spinner.

You can use this loading element:

• with an overlay:

  • default state has the loading spinner and message

  • if the control has 'absolute' attribute (TODO - there is a contradiction between attribute name-absolute and the fact that it sets position:fixed), the overlay will cover the entire screen, otherwise, the overlay will be shown over your content area, make sure your content area has position relative.

    • Use LoadingMixin to create the loading element when your custom element is stamped (createLoading); make sure you remove the loading element in your element detached state using removeLoading(loadingElement).

  • By default, the overlay will be displayed over the body, but if LoadingMixin it's used and property etoolsLoadingContainer is set then this will be used as container.

• simple, no overlay, inline block: the loading spinner and the message will be displayed inline-block.

Usage

Default. The loading it's placed inside a container:

<etools-loading active>Loading text here...</etools-loading>

Inline block loading:

<etools-loading no-overlay active>Loading text here...</etools-loading>

Absolute positioning

<etools-loading absolute active>Loading text here...</etools-loading>

Styling

You can use defined variables for styling.

| Custom property | Description | Default | | --------------------------------------- | --------------------------------------------- | --------- | | --etools-loading-overlay-transparency | Overlay transparency | 0.6 | | --etools-loading-msg-color | Loading message color | #333333 | | --etools-loading-spinner-size | Spinner size (width & height) | 20px | | --etools-loading-bg-color | Background color | #ffffff | | --etools-loading-border-color | Border color | #dedede | | --etools-loading-shadow-color | Shadow color | #333333 | | etools-loading::part(container) | CSS Shadow Part applied to loading container | {} | | etools-loading::part(message) | CSS Shadow Part applied to loading message | {} |

Install

$ npm i --save unicef-polymer/etools-loading#branch_name

Preview element locally

Install needed dependencies by running: $ npm install. Make sure you have the Polymer CLI installed. Then run $ polymer serve to serve your element application locally.

Update demo interface: $ polymer analyze demo/index.html > analysis.json

Linting the code

Install local npm packages (run npm install) Then just run the linting task

$ npm run lint

Running Tests

$ polymer test

Circle CI

Package will be automatically published after tag push (git tag 1.2.3 , git push --tags). Tag name must correspond to SemVer (Semantic Versioning) rules.
Examples:

| Version match | Result | | ------------------ | -------- | | 1.2.3 | match | | 1.2.3-pre | match | | 1.2.3+build | match | | 1.2.3-pre+build | match | | v1.2.3-pre+build | match | | 1.2 | no match |

You can see more details here