ray-progress
v1.0.0
Published
ray progress
Downloads
6
Readme
ray-progress
Minimalist progress bar
top progress
install
Add [rayprogress.js] and [progress.css] to your project.
<script src='ray-progress.js'></script>
<link rel='stylesheet' href='progress.css'/>
$ npm install --save ray-progress
Basic usage
Simply call start()
and done()
to control the progress bar.
import RProgress from 'ray-progress';
RProgress.start();
RProgress.done();
Turbolinks (version 5+)
Ensure you're using Turbolinks 5+, and use
$(document).on('turbolinks:click', function() {
RProgress.start();
});
$(document).on('turbolinks:render', function() {
RProgress.done();
RProgress.remove();
});
Turbolinks (version 3 and below)
Ensure you're using Turbolinks 1.3.0+, and use
$(document).on('page:fetch', function() { RProgress.start(); });
$(document).on('page:change', function() { RProgress.done(); });
$(document).on('page:restore', function() { RProgress.remove(); });
Pjax
$(document).on('pjax:start', function() { RProgress.start(); });
$(document).on('pjax:end', function() { RProgress.done(); });
simple
Add progress to your Ajax calls! Bind it to the jQuery
ajaxStart
andajaxStop
events.Make a fancy loading bar even without Turbolinks/Pjax! Bind it to
$(document).ready
and$(window).load
.
Advanced usage
Percentages: To set a progress percentage, call .set(n)
, where n is a
number between 0..1
.
RProgress.set(0.0); // Sorta same as .start()
RProgress.set(0.4);
RProgress.set(1.0); // Sorta same as .done()
Incrementing: To increment the progress bar, just use .inc()
. This
increments it with a random amount. This will never get to 100%: use it for
every image load (or similar).
RProgress.inc();
If you want to increment by a specific value, you can pass that as a parameter:
RProgress.inc(0.2); // This will get the current status value and adds 0.2 until status is 0.994
Force-done: By passing true
to done()
, it will show the progress bar
even if it's not being shown. (The default behavior is that .done() will not
do anything if .start() isn't called)
RProgress.done(true);
Get the status value: To get the status value, use .status
Configuration
minimum
Changes the minimum percentage used upon starting. (default: 0.08
)
RProgress.configure({ minimum: 0.1 });
template
You can change the markup using template
. To keep the progress
bar working, keep an element with role='bar'
in there. See the [default template]
for reference.
RProgress.configure({
template: "<div class='....'>...</div>"
});
easing
and speed
Adjust animation settings using easing (a CSS easing string)
and speed (in ms). (default: ease
and 200
)
RProgress.configure({ easing: 'ease', speed: 500 });
trickle
Turn off the automatic incrementing behavior by setting this to false
. (default: true
)
RProgress.configure({ trickle: false });
trickleSpeed
Adjust how often to trickle/increment, in ms.
RProgress.configure({ trickleSpeed: 200 });
showSpinner
Turn off loading spinner by setting it to false. (default: true
)
RProgress.configure({ showSpinner: false });
parent
specify this to change the parent container. (default: body
)
RProgress.configure({ parent: '#container' });
Custom
Just edit progress.css
to your liking.
License
MIT