@dile/dile-spinner
@dile/dile-spinner
npm i @dile/dile-spinner
@dile/dile-spinner

@dile/dile-spinner

Dile Web Components monorepo

by Polydile

1.2.0 (see all)License:MITTypeScript:Not Found
npm i @dile/dile-spinner
Readme

@dile/dile-spinner

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

Installation

npm i @dile/dile-spinner

\

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

Usage

Import the component.

import '@dile/dile-spinner/dile-spinner.js';

Use it inside your HTML.

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

Properties

  • active: Boolean. Defines the spinner visibility. The spinner only appears when active is true.

Styling

Custom propertyDescriptionDefault
--dile-spinner-colorThe ajax loading color#888
--dile-spinner-dot-sizeThe size of the dots in the spinner animation6px

\

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

Similar as dile-spinner implementation.

Import the component.

import '@dile/dile-spinner/dile-spinner-modal.js';

Use it inside your HTML.

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

Styling

In addition to the dile-spinner properties:

Custom propertyDescriptionDefault
--dile-spinner-modal-background-colorThe modal layer background colorrgba(255, 255, 255, 0.8)
--dile-spinner-modal-box-colorColor of a small layer rounding the spinner element for higher contrast and visibilityrgba(0, 0, 0, 0.9)
<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>

Downloads/wk

38

GitHub Stars

24

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

7

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.2.0
latest
4mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate