Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

virtual-dom loading dots component

Resources

Packages

No packages published
You can’t perform that action at this time.