https://github.com/polydile/dile-spinner
Web Component to create a spinner element to display during Ajax calls or other asynchronous tasks
https://github.com/polydile/dile-spinner
Last synced: 11 months ago
JSON representation
Web Component to create a spinner element to display during Ajax calls or other asynchronous tasks
- Host: GitHub
- URL: https://github.com/polydile/dile-spinner
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-07-05T22:53:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:31:21.000Z (over 1 year ago)
- Last Synced: 2025-07-03T10:19:17.984Z (12 months ago)
- Language: JavaScript
- Homepage: https://dile-spinner.polydile.com
- Size: 3.31 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# 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)
## \
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
import 'dile-spinner/dile-spinner.js';
```
#### 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
## \
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
import 'dile-spinner/dile-spinner-modal.js';
```
#### 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
.customized {
--dile-spinner-color: #3ca;
--dile-spinner-dot-size: 10px;
--dile-spinner-modal-background-color: #505050;
--dile-spinner-modal-box-color: #fff;
}
```