Skip to content
A spinning loader, with dots
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows doc: lien demo Jan 10, 2020
.gitignore First commit Jan 10, 2020
.prettierrc
README.md fix: connectedCallbacks Jan 21, 2020
index.html doc: github link added on the demo Jan 10, 2020
index.js fix: connectedCallbacks Jan 21, 2020
package.json fix: connectedCallbacks Jan 21, 2020
yarn.lock First commit Jan 10, 2020

README.md

Customized built-in elements <spinning-dots>

npm

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 '@grafikart/spinning-dots-element'

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

0.0.3

  • Make library usable using new SpinningDots()

0.0.2

  • Better default size

0.0.1

  • Initial release
You can’t perform that action at this time.