https://github.com/fralonra/el-spinner

Html text spinner
https://github.com/fralonra/el-spinner

spinner

Last synced: about 1 month ago
JSON representation

Html text spinner

• Host: GitHub
• URL: https://github.com/fralonra/el-spinner
• Owner: fralonra
• License: mit
• Created: 2018-11-10T13:14:54.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-21T05:55:18.000Z (about 4 years ago)
• Last Synced: 2024-12-20T09:34:59.177Z (about 1 month ago)
• Topics: spinner
• Language: JavaScript
• Homepage:
• Size: 217 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# el-spinner

[![Build Status](https://travis-ci.com/fralonra/el-spinner.svg?branch=master)](https://travis-ci.com/fralonra/el-spinner)

[![npm version](https://img.shields.io/npm/v/el-spinner.svg)](https://www.npmjs.com/package/el-spinner) [![Greenkeeper badge](https://badges.greenkeeper.io/fralonra/el-spinner.svg)](https://greenkeeper.io/)

Quickly make a text spinner for your HTML. Using [cli-spinners](https://github.com/sindresorhus/cli-spinners).

[demo](https://fralonra.github.io/el-spinner/demo/)

## Install

```bash

npm install --save el-spinner

```

## Usage

Include the `javascript` file in your **HTML** and make a new `ElSpinner`:

```html



  const spinner = new ElSpinner({

    /* options */

    el: document.getElementById('el')

  })

  spinner.start() // You should manually start the spinner

```

You can also use it like this:

```javascript

import ElSpinner from 'el-spinner'

let spinner = new ElSpinner({

  el: document.getElementById('el')

})

spinner.start()

```

## API

### methods

#### constructor(options)

#### start()

Start the spinner from the first frame.

#### stop()

Stop the spinner.

#### resume()

Resume the spinner.

#### toggle()

Toggle the spinner state between `stop` and `resume`.

#### remove()

Stop the spinner and then remove the text from the element.

#### set(options)

Pass a new option to the spinner.

### options

| Option | Description | Type | Default |

| --- | --- | --- | --- |

| el | The element where to display the spinner. | Element | - |

| type | The type of the spinner. Please check [the list](https://github.com/sindresorhus/cli-spinners/blob/master/spinners.json) | String | 'dots' |

| interval | Interval between each frame. If not set, the value from the original spinner will be used | Number | - |