Tiny progress bar widget in css3 and js es6 / es2015. Designed for ease of use.
Add to your site with two lines of code:
No production dependencies, assets, globals, or primitive decoration. Source is 2.1k. Minified ES5 with
require() packaging is 2.6k. Works in browsers, node, and embedded browsers.
You have control of color, background color and presence, location (defaults to fixed browser top,) animation transition, and many other things that most people won't actually care about in practice.
Ships with ES6 packaging, ES5 packaging that works in-browser and in-node, and minified ES5. (We're waiting on a closure compiler patch before es6 minification will work correctly.)
pbar with no options, or with an empty object, is legal.
pbar will ignore options it doesn't recognize.
pbar writes inline styles without quoting. Options are subject to injections. Do not use
pbar with user generated content.
pbar does recognize:
backgroundis the value of the
backgroundproperty on the master frame tag. Default is transparent.
borderis the value of the
borderproperty on the tag drawing the frame. Default is
0px solid transparent.
coloris the value of the
backgroundproperty on the tag drawing the bar. Generally this will be a color, but this very easily could be an image, or whatever. Default is #40B3CC, a light blue.
heightis the value of the
heightproperty of the frame tag. Default is
'4px'. This is a CSS string, and therefore requires a unit unless
valueis the value of the
widthproperty of the bar tag. Normally this would be expressed as a percentage. Default is
50%, which is kind of trolly, but nice for newcomers.
targetis the identity of the bar's host. Unlike most values, this isn't a CSS property. Instead, it's either a DOM reference like you'd get from
document.getElementById(), or a string which will be looked up as an
idby the library. If no
positionof the frame tag. Default is
targetis given, or
absoluteif one is.
transitionis the value of the
transitionproperty, but with the string
'width 'prepended to the front. Generally provide the time and/or the easing function in CSS format, such as
'0.5s easeOutSine'. Default is
pbar is MIT licensed, because viral licenses and newspeak language modification are evil. Free is only free when it's free for everyone.