A stateless loading dots component. Takes on its parent element's width and height. Uses css @keyframes for animations
Examples:
$ npm install --save virtual-loading-dots
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
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
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)
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)
Type: string
Default: use default-animation as a reference example
The animation for your dots
Type: number
or string
Default: 50
0
for squares, 50
for circles, anything in between for a hybrid shape
Type: string
Default: 'black'
The color of your dots in css color notation
Type: number
Default: 3
The number of dots
Type: string
Default: row
'row'
or 'column'
. Whether your dots are horizontal or vertical
Type: number
Default: 0.16
The animation-delay between each neighboring dot
- 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
MIT