virtual-dom progress bar 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 Allow consumer to override styles May 7, 2017
src
test
.gitignore
.travis.yml
README.md
package.json

README.md

virtual-progress-bar npm version Build Status

A stateless progress bar component. Takes on its parent element's width and height

View live demo

Examples:

To Install

$ npm install --save virtual-progress-bar

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-progress-bar && cd virtual-progress-bar && npm install && npm run demo

Usage

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

with virtual-dom

var h = require('virtual-dom/h')
var ProgressBar = require('virtual-progress-bar')
ProgressBar.render(h) // returns vtree

with react

var h = require('react').createElement
var ProgressBar = require('virtual-progress-bar')
ProgressBar.render(h, {meterColor: 'red'}) // returns vtree
# view the demo in a local browser by pasting this into your terminal
# changes to the `demo` and `src` directories will live reload in your browser
git clone https://github.com/chinedufn/virtual-progress-bar && cd virtual-progress-bar && npm install && npm run demo

API

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

h

Required

Type: function

Your hyperscript style DOM builder

// standalone virtual-dom example
var h = require('virtual-dom/h')
ProgressBar.render(h)
// React example
var React = require('react')
ProgressBar.render(React.createElement)

Options

Optional

Type: object

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

// Example overrides
var myOptions = {
  containerColor: 'rgba(0, 0, 0, .8)',
  meterColor: '#ff0000'
  direction: 'column',
  percent: 90
}
ProgressBar.render(h, myOptions)
containerColor

Type: string

Default: '#1a1a1a1'

The color of your container in css color notation

meterColor

Type: string

Default: '#fecf23'

The color of your progress meter in css color notation

direction

Type: string

Default: 'row'

'row' for a horizontal progress bar

'column' for a vertical progress bar

percent

Type: number

Default: 50

The percent that your meter is filled

meterStyle

Type: Object

Styles that you pass in to override the default styling for the meter

containerStyle

Type: Object

Styles that you pass in to override the default styling for the container

TODO:

  • Clean up examples
  • Think about exposing an api to extend the properties of RenderProgressBar's internal Vnodes
  • Add an animated candy-striped bar example

See Also

License

MIT