@toujou/toujou-spinner

3.0.0 • Public • Published

TOUJOU-SPINNER

The <toujou-spinner> render a spinner on the pge, to show that something is loading

How to install

  1. install via NPM with npm install @toujou/toujou-spinner
  2. import
    1. in html with <script src="node_modules/@toujou/toujou-spinner/dist/toujou-spinner.js"></script>
    2. in js with: import ToujouSpinner from '@toujou/toujou-spinner';

How to use

<toujou-spinner></toujou-spinner>

How to customize

Attributes

[center-on-page]

You can add the center-on-page attribute to render the spinner in the center of the page, independent of where on the markup it is placed.

Example: <toujou=spinner center-on-page></toujou-spinner>

Styles

CSS Custom properties

There are several custom properties that help us customize the spinner:

  • --toujou-spinner-size
  • --toujou-spinner-thickness
  • --toujou-spinner-start-color
  • --toujou-spinner-end-color
  • --toujou-spinner-animation-duration
  • --toujou-spinner-dash-animation-duration
  • --toujou-spinner-display

Dependencies

  • Lit [^2.0.0-rc.2]

Package Sidebar

Install

npm i @toujou/toujou-spinner

Weekly Downloads

0

Version

3.0.0

License

MIT

Unpacked Size

75.4 kB

Total Files

11

Last publish

Collaborators

  • twojtylak
  • dfau_lpato
  • tmaroschik