# @unicef-polymer/etools-loading > Loading spinner Latest version **6.1.1** (published 2023-04-28) · BSD-3-Clause license · 0 weekly downloads ## Install ```sh npm install @unicef-polymer/etools-loading pnpm add @unicef-polymer/etools-loading yarn add @unicef-polymer/etools-loading bun add @unicef-polymer/etools-loading ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 6.1.1 | | Published | 2023-04-28 | | First published | 2019-06-03 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 377.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Maintainers | insightfeatures, robertavram, dci_npm, drzackyll, glebp, andrei.laza, uladzimir_u, adriana.trif, adrian-hangan | ## Links - npm: https://www.npmjs.com/package/@unicef-polymer/etools-loading - Repository: https://github.com/unicef-polymer/etools-loading - Issues: https://github.com/unicef-polymer/etools-loading/issues - npm.io page: https://npm.io/package/@unicef-polymer/etools-loading ## Dependencies (3) - [lit-element](https://npm.io/package/lit-element.md) ^2.3.1 - [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ^3.4.1 - [@polymer/paper-spinner](https://npm.io/package/@polymer/paper-spinner.md) ^3.0.0 ## Recent versions - 6.1.1 (latest) — 2023-04-28 - 6.1.0 — 2023-03-28 - 6.0.3-rc1 — 2023-03-16 - 6.0.2 — 2023-02-22 - 6.0.1 — 2022-11-02 - 6.0.1-rc.2 — 2022-10-25 - 6.0.1-rc.1 — 2022-10-25 - 6.0.0 — 2022-08-26 - 6.0.0-rc.1 — 2022-08-24 - 5.0.1 — 2022-01-30 - 5.0.0 — 2022-01-12 - 5.0.0-rc.2 — 2021-11-10 - 5.0.0-rc.1 — 2021-11-08 - 4.0.6 — 2021-10-28 - 4.0.5 — 2021-10-14 - … 6 more at https://npm.io/package/@unicef-polymer/etools-loading/versions ## README # \ 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: ```html Loading text here... ``` ![Loading inside a container](img/etools-loading-contained.png) ### Inline block loading: ```html Loading text here... ``` ![Loading inside a container](img/etools-loading-inline-block-position.png) ### Absolute positioning ```html Loading text here... ``` ![Loading inside a container](img/etools-loading-absolute-position.png) ### 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 ```bash $ 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](https://www.npmjs.com/package/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 ```bash $ 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](https://rgxdb.com/r/40OZ1HN5) --- _Source: https://npm.io/package/@unicef-polymer/etools-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._