CustomElement-SpinningDots

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

CustomElement-SpinningDots

★ 24 Open GitHub ↗

A spinning loader, with dots

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Customized built-in elements `<spinning-dots>`

[![npm](https://img.shields.io/npm/v/@grafikart/spinning-dots-element.svg)](http://npm.im/@grafikart/spinning-dots-element)

The goal of this module is to have a reusable component to display a spinning loader. [Live demo](https://grafikart.github.io/CustomElement-SpinningDots/)

## Usage

### With npm

Install the package using npm or yarn

```bash
npm i @grafikart/spinning-dots-element
# or
yarn add @grafikart/spinning-dots-element
```

Then import it in your script

```js
import SpinningDots from '@grafikart/spinning-dots-element';

customElements.define('spinning-dots', SpinningDots);
```

### With unpkg.com

```html
<script type="module" src="//unpkg.com/@grafikart/spinning-dots-element"></script>
```

Then use the custom element in your html using `<spinning-dots>`.

```html

<spinning-dots></spinning-dots>

<spinning-dots style="width: 100px;"></spinning-dots>

<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

CustomElement-SpinningDots

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README