# dile-spinner

> Web Component to create a spinner element to display during Ajax calls or other asynchronous tasks

Latest version **2.0.5** (published 2020-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install dile-spinner
pnpm add dile-spinner
yarn add dile-spinner
bun add dile-spinner
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2020-07-08 |
| First published | 2019-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | @midesweb |
| Maintainers | midesweb |
| Keywords | Web Component, Spinner, LitElement, Ajax |

## Links

- npm: https://www.npmjs.com/package/dile-spinner
- Repository: https://github.com/polydile/dile-spinner
- Homepage: https://github.com/polydile/dile-spinner#readme
- Issues: https://github.com/polydile/dile-spinner/issues
- npm.io page: https://npm.io/package/dile-spinner

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.2.0

## Recent versions

- 2.0.5 (latest) — 2020-07-08
- 2.0.4 — 2020-04-15
- 2.0.3 — 2020-04-15
- 2.0.2 — 2019-08-01
- 2.0.1 — 2019-07-06
- 2.0.0 — 2019-07-06
- 1.1.2 — 2019-07-06

## README

# Moved

**This package has moved** and is now available at [@dile/dile-spinner](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained.


# dile-spinner

A pack of web components to implement the tipical "Ajax loading" spinner interface. Based on LitElement.

More details: [Go to DEMO page](https://dile-spinner.polydile.com)

## \<dile-spinner>

The simpler implementation. Useful to show a inline spinner element, localized in the place where you put the dile-spinner element.

### Installation
```bash
npm i dile-spinner
```

### Usage
```html
<script type="module">
  import 'dile-spinner/dile-spinner.js';
</script>

<dile-spinner active></dile-spinner>
```

#### Properties

- **active**: Boolean, defines the spinner visibility. The spinner only appears when active is true.

#### Styling

Custom property | Description | Default
----------------|-------------|---------
--dile-spinner-color | The ajax loading color | #888
--dile-spinner-dot-size | The size of the dots in the spinner animation | 6px

## \<dile-spinner-modal>

This is an adaptation of the dile-spinner element using a modal box, blocking the interface of the rest of the page when the spinner is active.

### Usage

Same as dile-spinner implementation.

```html
<script type="module">
  import 'dile-spinner/dile-spinner-modal.js';
</script>

<dile-spinner-modal active></dile-spinner-modal>
```

#### Styling

Custom property | Description | Default
----------------|-------------|---------
--dile-spinner-modal-background-color | The modal layer background color | rgba(255, 255, 255, 0.8)
--dile-spinner-modal-box-color | Color of a small layer rounding the spinner element for higher contrast and visibility | rgba(0, 0, 0, 0.9)

```html
<style>
.customized {
  --dile-spinner-color: #3ca;
  --dile-spinner-dot-size: 10px;
  --dile-spinner-modal-background-color: #505050;
  --dile-spinner-modal-box-color: #fff;
}
</style>
<dile-spinner-modal active class="customized" id="spinnerModal"></dile-spinner-modal>
```

---
_Source: https://npm.io/package/dile-spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._