# ray-progress

> ray progress

Latest version **1.0.0** (published 2022-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-progress
pnpm add ray-progress
yarn add ray-progress
bun add ray-progress
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-12-12 |
| First published | 2022-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/ray-progress
- npm.io page: https://npm.io/package/ray-progress

## Recent versions

- 1.0.0 (latest) — 2022-12-12

## README

# ray-progress

> Minimalist progress bar

top progress

## install

Add [rayprogress.js] and [progress.css] to your project.

```html
<script src='ray-progress.js'></script>
<link rel='stylesheet' href='progress.css'/>
```

```bash
  $ npm install --save ray-progress
```

## Basic usage

Simply call `start()` and `done()` to control the progress bar.

``` js
import RProgress from 'ray-progress';
RProgress.start();
RProgress.done();
```

### Turbolinks (version 5+)

Ensure you're using Turbolinks 5+, and use

```js
$(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

```js
$(document).on('page:fetch',   function() { RProgress.start(); });
$(document).on('page:change',  function() { RProgress.done(); });
$(document).on('page:restore', function() { RProgress.remove(); });
```

### Pjax

```js
$(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` and
 `ajaxStop` 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`.

``` js
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).

```js
RProgress.inc();
```

If you want to increment by a specific value, you can pass that as a parameter:

```js
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)

```js
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`)

```js
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.

```js
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`)

```js
RProgress.configure({ easing: 'ease', speed: 500 });
```

#### `trickle`
Turn off the automatic incrementing behavior by setting this to `false`. (default: `true`)

```js
RProgress.configure({ trickle: false });
```

#### `trickleSpeed`
Adjust how often to trickle/increment, in ms.

```js
RProgress.configure({ trickleSpeed: 200 });
```

#### `showSpinner`
Turn off loading spinner by setting it to false. (default: `true`)

```js
RProgress.configure({ showSpinner: false });
```

#### `parent`
specify this to change the parent container. (default: `body`)

```js
RProgress.configure({ parent: '#container' });
```

### Custom

Just edit `progress.css` to your liking.

## License

MIT

---
_Source: https://npm.io/package/ray-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._