Skip to content

chinedufn/virtual-progress-bar

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

About

virtual-dom progress bar component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published