<spinning-dots>
Customized built-in elements
The goal of this module is to have a reusable component to display a spinning loader. Live demo
Usage
With npm
Install the package using npm or yarn
npm i @grafikart/spinning-dots-element
# or
yarn add @grafikart/spinning-dots-element
Then import it in your script
import SpinningDots from '@grafikart/spinning-dots-element'
customElements.define('spinning-dots', SpinningDots)
With unpkg.com
<script type="module" src="//unpkg.com/@grafikart/spinning-dots-element"></script>
Then use the custom element in your html using <spinning-dots>
.
<-- This will create a loader with a 68px width -->
<spinning-dots></spinning-dots>
<-- Everything scales according to the width -->
<spinning-dots style="width:100px;"></spinning-dots>
<-- Every configuration possible -->
<spinning-dots style="width:100px; stroke-width:20px; color: #535FF6;" dots="8"></spinning-dots>
Attributes
Attribute | Type | Description |
---|---|---|
dots |
number |
The number of dots to display |
CSS Styles
This custom element is affected by these styles
Property | Description |
---|---|
width |
Set the size of the element |
stroke-width |
Set the width of the trail |
color |
Set the color, inherit the parent color by default |
Changelog
1.0.0
- Removed automatic definition of customElement
0.0.3
- Make library usable using
new SpinningDots()
0.0.2
- Better default size
0.0.1
- Initial release