virtual-dom loading dots component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src
test
.gitignore
.travis.yml
README.md
package.json

README.md

virtual-loading-dots npm version Build Status

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

View live demo

Examples:

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

License

MIT