Skip to content

Latest commit

 

History

History
105 lines (70 loc) · 3.66 KB

README.md

File metadata and controls

105 lines (70 loc) · 3.66 KB
Raw

<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>

Loading inside a container

Inline block loading:

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

Loading inside a container

Absolute positioning

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

Loading inside a container

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