Customized built-in elements <spinning-dots>

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

CSS Styles

This custom element is affected by these styles

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