sgauthier
6e64e138e2
All checks were successful
Publish To Prod / deploy_and_publish (push) Successful in 35s
182 lines
7.5 KiB
HTML
182 lines
7.5 KiB
HTML
<!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>
|