virtual-progress-bar

virtual-dom progress bar component

Usage no npm install needed!

<script type="module">
  import virtualProgressBar from 'https://cdn.skypack.dev/virtual-progress-bar';
</script>

README

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

Usage

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

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

var h = require('react').createElement
var ProgressBar = require('virtual-progress-bar')
ProgressBar(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