This commit is contained in:
181
node_modules/topbar/index.html
generated
vendored
Normal file
181
node_modules/topbar/index.html
generated
vendored
Normal file
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="index/stylesheets/stylesheet.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="index/stylesheets/pygment_trac.css" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="index/stylesheets/print.css" media="print" />
|
||||
<link rel="stylesheet" type="text/css" href="index/stylesheets/tomorrow-night-bright.css" media="all" />
|
||||
<script src="index/javascripts/jquery-1.10.2.min.js"></script>
|
||||
<script src="index/javascripts/prettify.min.js"></script>
|
||||
<script src="topbar.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<title>topbar by buunguyen</title>
|
||||
<script>
|
||||
$(function() {
|
||||
prettyPrint()
|
||||
function resetToDefaults() {
|
||||
topbar.config({
|
||||
autoRun : true,
|
||||
barThickness : 3,
|
||||
barColors : {
|
||||
'0' : 'rgba(26, 188, 156, .9)',
|
||||
'.25' : 'rgba(52, 152, 219, .9)',
|
||||
'.50' : 'rgba(241, 196, 15, .9)',
|
||||
'.75' : 'rgba(230, 126, 34, .9)',
|
||||
'1.0' : 'rgba(211, 84, 0, .9)'
|
||||
},
|
||||
shadowBlur : 10,
|
||||
shadowColor : 'rgba(0, 0, 0, .6)',
|
||||
className : 'topbar'
|
||||
})
|
||||
}
|
||||
|
||||
// Page load
|
||||
resetToDefaults()
|
||||
topbar.show()
|
||||
setTimeout(function() {
|
||||
$('#main_content').fadeIn('slow')
|
||||
topbar.hide()
|
||||
}, 1500)
|
||||
|
||||
// Simple Demo
|
||||
$('#btnStartSimple').click(function() {
|
||||
resetToDefaults()
|
||||
topbar.show()
|
||||
})
|
||||
$('#btnStopSimple').click(function() {
|
||||
topbar.hide()
|
||||
})
|
||||
|
||||
// Advanced Demo
|
||||
$('#btnStartAdvanced').click(function() {
|
||||
resetToDefaults()
|
||||
topbar.config({
|
||||
autoRun : false,
|
||||
barThickness : 5,
|
||||
barColors : {
|
||||
'0' : 'rgba(26, 188, 156, .7)',
|
||||
'.3' : 'rgba(41, 128, 185, .7)',
|
||||
'1.0' : 'rgba(231, 76, 60, .7)'
|
||||
},
|
||||
shadowBlur : 5,
|
||||
shadowColor : 'rgba(0, 0, 0, .5)'
|
||||
})
|
||||
topbar.show();
|
||||
(function step() {
|
||||
setTimeout(function() {
|
||||
if (topbar.progress('+.01') < 1) step()
|
||||
}, 16)
|
||||
})()
|
||||
})
|
||||
$('#btnStopAdvanced').click(function() {
|
||||
topbar.hide()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h1>topbar</h1>
|
||||
<h2>Tiny & beautiful site-wide progress indicator</h2>
|
||||
</header>
|
||||
|
||||
<section id="main_content">
|
||||
<section id="downloads" class="clearfix">
|
||||
<a href="https://github.com/buunguyen/topbar/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
|
||||
<a href="https://github.com/buunguyen/topbar/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
|
||||
<a href="https://github.com/buunguyen/topbar" id="view-on-github" class="button"><span>View on GitHub</span></a>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Highlights</h3>
|
||||
<ul>
|
||||
<li>Tiny (1KB minified and gzipped), no dependency</li>
|
||||
<li>Perfect for single-page/Turbolinks/pjax applications</a></li>
|
||||
<li>Responsive</li>
|
||||
</ul>
|
||||
<h3>Usages</h3>
|
||||
<h4>Installation</h4>
|
||||
<section class="code">
|
||||
<p>Download <a href="https://raw.github.com/buunguyen/topbar/master/topbar.js">topbar.js</a> or <a href="https://raw.github.com/buunguyen/topbar/master/topbar.min.js">topbar.min.js</a> and include it in the page.</p>
|
||||
<pre class="prettyprint"><script src="path/to/topbar.js"></script></pre>
|
||||
<p><em>optional:</em> also available for Bower (<code>bower install topbar</code>) and Browserify (<code>npm install topbar</code>).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h4>Basic</h4>
|
||||
<section class="code">
|
||||
<p>Call <code>topbar.show()</code> to show and <code>topbar.hide()</code> to hide the progress bar. Before <code>topbar.hide()</code> is called, the progress bar will move slower and slower but never actually reach 100%. Most of the time, these 2 methods are all you need.</p>
|
||||
<a id="btnStartSimple" class="button" href="javascript:void(0)">Show Progress</a>
|
||||
<a id="btnStopSimple" class="button" href="javascript:void(0)">Hide Progress</a>
|
||||
<pre class="prettyprint">
|
||||
$('#btnStartSimple').click(function() {
|
||||
topbar.show()
|
||||
})
|
||||
|
||||
$('#btnStopSimple').click(function() {
|
||||
topbar.hide()
|
||||
})</pre>
|
||||
</section>
|
||||
<h4>Advanced</h4>
|
||||
<section class="code">
|
||||
<p>Use <code>topbar.config(options)</code> to customize <em>topbar</em>.</p>
|
||||
<ul>
|
||||
<li><code>autoRun</code> (default: <code>true</code>): if <code>false</code>, call <code>topbar.progress()</code> manually to run.</li>
|
||||
<li><code>barThickness</code> (default: <code>3</code>): the progress bar thickness.</li>
|
||||
<li><code>barColors</code>: list of gradient color stops used to draw the progress bar.</li>
|
||||
<li><code>shadowBlur</code> (default: <code>10</code>): the shadow blur.</li>
|
||||
<li><code>shadowColor</code>: the shadow color.</li>
|
||||
<li><code>className</code>: the CSS class name for the progress bar.</li>
|
||||
</ul>
|
||||
<p>Note: <code>topbar.progress()</code> can take a number or string value. If string, you can use <code>+</code> or <code>-</code> to change the progress relatively to current position. If no argument is specified, return the current progress (<code>0</code> to <code>1</code>).</p>
|
||||
<a id="btnStartAdvanced" class="button" href="javascript:void(0)">Show Progress</a>
|
||||
<a id="btnStopAdvanced" class="button" href="javascript:void(0)">Hide Progress</a>
|
||||
<pre class="prettyprint">
|
||||
$('#btnStartAdvanced').click(function() {
|
||||
topbar.config({
|
||||
autoRun : false,
|
||||
barThickness : 5,
|
||||
barColors : {
|
||||
'0' : 'rgba(26, 188, 156, .7)',
|
||||
'.3' : 'rgba(41, 128, 185, .7)',
|
||||
'1.0' : 'rgba(231, 76, 60, .7)'
|
||||
},
|
||||
shadowBlur : 5,
|
||||
shadowColor : 'rgba(0, 0, 0, .5)',
|
||||
className : 'topbar',
|
||||
})
|
||||
topbar.show();
|
||||
(function step() {
|
||||
setTimeout(function() {
|
||||
if (topbar.progress('+.01') < 1) step()
|
||||
}, 16)
|
||||
})()
|
||||
})
|
||||
|
||||
$('#btnStopAdvanced').click(function() {
|
||||
topbar.hide()
|
||||
})</pre>
|
||||
</section>
|
||||
|
||||
<h3>Browsers</h3>
|
||||
<p><em>topbar</em> works with any browser that supports <a href="http://caniuse.com/canvas">HTML5 Canvas</a>.</p>
|
||||
|
||||
<footer>
|
||||
topbar is maintained by <a href="https://github.com/buunguyen">buunguyen</a><br>
|
||||
This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
|
||||
</footer>
|
||||
</section> <!-- main_content-->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user