Virtual-loading-dots NPM

virtual-loading-dots

A stateless loading dots component. Takes on its parent element's width and height. Uses css @keyframes for animations

Examples:

To Install

$ npm install --save virtual-loading-dots

Usage

virtual-loading-dots works with virtual-dom, react, or any other DOM builder with a hyperscript style api

var h = require('virtual-dom/h')
var LoadingDots = require('virtual-loading-dots')
LoadingDots.render(h) // returns vtree

# view the demo in a local browser by pasting this into your terminal:
# changes to the `demo` directory will live reload in your browser
git clone https://github.com/chinedufn/virtual-loading-dots && cd virtual-loading-dots && npm install && npm run demo

API

`LoadingDots.render(h[, opts])` -> `vtree`

h

Required

Type: function

Your hyperscript style DOM builder

// standalone virtual-dom example
var h = require('virtual-dom/h')
LoadingDots.render(h)

// React example
var React = require('react')
LoadingDots.render(React.createElement)

Options

Optional

Type: object

virtual-loading-dots comes with default options. Pass in the ones that you'd like to override

// Example overrides
var myOptions = {
  animation: 'my-cool-animation 2.5s ease-in-out infinite both',
  borderRadius: '50',
  color: '#ff0000',
  count: '4',
  direction: 'column',
  delay: '0.3'
}
LoadingDots.render(h, myOptions)

animation

Type: string

Default: use default-animation as a reference example

The animation for your dots

borderRadius

Type: number or string

Default: 50

0 for squares, 50 for circles, anything in between for a hybrid shape

color

Type: string

Default: 'black'

The color of your dots in css color notation

count

Type: number

Default: 3

The number of dots

direction

Type: string

Default: row

'row' or 'column'. Whether your dots are horizontal or vertical

delay

Type: number

Default: 0.16

The animation-delay between each neighboring dot

TODO:

Add a few different loadingDots usage examples
Add documentation to highlight the importance of framework agnostic components
Research React and update the React example if necessary
Maybe add .jsx and hyperx examples
Add a script tag example
Think about exposing an api to extend the properties of Loading Dots' internal Vnodes