@unicef-polymer/etools-loading

<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