pbar
Version:
Tiny progress bar widget in css and js es5
113 lines (96 loc) • 7.34 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl">
<title data-ice="title">API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
</head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a data-ice="repoURL" href="https://github.com/StoneCypher/pbar" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/pbar.js~pbar.html">pbar</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h1 id="pbar">pbar</h1>
<p>Tiny progress bar widget in css3 and js es6 / es2015. Designed for ease of use.</p>
<p>Add to your site with two lines of code:</p>
<p><code>ES5</code></p>
<pre><code class="lang-html"><code class="source-code prettyprint"><script defer src="pbar.es5.min.js" type="text/javascript"></script>
<script defer type="text/javascript">var pb = new require('pbar').pbar;</script></code>
</code></pre>
<p><code>ES6</code></p>
<pre><code class="lang-html"><code class="source-code prettyprint"><script defer src="pbar.js" type="text/javascript"></script>
<script defer type="text/javascript">import {pbar} from './pbar.js';</script></code>
</code></pre>
<p>No production dependencies, assets, globals, or primitive decoration. Source is 2.1k. Minified ES5 with <code>require()</code> packaging is 2.6k. Works in browsers, node, and embedded browsers.</p>
<p>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.</p>
<p>Ships with ES6 packaging, ES5 packaging that works in-browser and in-node, and minified ES5. (We're <a href="https://github.com/google/closure-compiler/commit/d62eb21375427b25b87490cedd833ce4f6cd0371">waiting on a closure compiler patch</a> before es6 minification will work correctly.)</p>
<h2 id="tl-dr">tl;dr</h2>
<pre><code class="lang-html"><code class="source-code prettyprint"><!doctype html><html><head>
<script defer src="../dist/pbar.es5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var pbar, pb;
var pb;
window.onload = function() { // when the page loads
pbar = require('pbar').pbar; // load the library
pb = new pbar({color:'red', value:'0%'}); // make a new progress bar, initially red and empty
pb.value = '20%'; // immediately animate to 20%
}
window.setTimeout(function() { // when the timeout fires
pb.color = '#aa0'; // change the color to dark yellow
pb.value = '80%'; // set the value to 80%
}, 2000); // the timeout fires in two seconds
window.setTimeout(function() { // when the timeout fires
pb.color = 'green'; // change the color to green
pb.value = '100%'; // set the value to 100%
}, 4000); // the timeout fires in four seconds
</script></head><body></body></html></code>
</code></pre>
<h2 id="options">Options</h2>
<p><code>pbar</code> with no options, or with an empty object, is legal. <code>pbar</code> will ignore options it doesn't recognize.</p>
<p><code>pbar</code> writes inline styles without quoting. <strong><em>Options are subject to injections</em></strong>. <u>Do not use <code>pbar</code> with user generated content</u>.</p>
<p>Options that <code>pbar</code> does recognize:</p>
<ul>
<li><code>background</code> is the value of the <code>background</code> property on the master frame tag. Default is transparent.</li>
<li><code>border</code> is the value of the <code>border</code> property on the tag drawing the frame. Default is <code>0px solid transparent</code>.</li>
<li><code>color</code> is the value of the <code>background</code> property 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.</li>
<li><code>height</code> is the value of the <code>height</code> property of the frame tag. Default is <code>'4px'</code>. This is a CSS string, and therefore requires a unit unless <code>0</code>.</li>
<li><code>value</code> is the value of the <code>width</code> property of the bar tag. Normally this would be expressed as a percentage. Default is <code>50%</code>, which is kind of trolly, but nice for newcomers.</li>
<li><code>target</code> is 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 <code>document.getElementById()</code>, or a string which will be looked up as an <code>id</code> by the library. If no <code>target</code> is given, <code>document.body</code> is assumed.</li>
<li><code>position</code> is the <code>position</code> of the frame tag. Default is <code>fixed</code> if no <code>target</code> is given, or <code>absolute</code> if one is.</li>
<li><code>transition</code> is the value of the <code>transition</code> property, but with the string <code>'width '</code> prepended to the front. Generally provide the time and/or the easing function in CSS format, such as <code>'0.35s'</code> or <code>'0.5s easeOutSine'</code>. Default is <code>'0.35s'</code>.</li>
</ul>
<h1 id="polemic-neckbeard-">Polemic :neckbeard:</h1>
<p><code>pbar</code> is MIT licensed, because viral licenses and newspeak language modification are evil. Free is <strong><em>only</em></strong> free when it's free for everyone.</p>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.6)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>