virtual-loading-dots

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

View live demo

Examples:

• virtual-dom
• react
• custom animation

To Install

$ npm install --save virtual-loading-dots

Demo

You can also run the live demo locally:

# Your changes to the `/demo` folder will now live reload in your browser
git clone https://github.com/chinedufn/virtual-loading-dots && cd virtual-loading-dots && npm install && npm run demo

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

See Also

• virtual-dom

License

MIT