https://github.com/firstandthird/pprogress

Javascript pie style progress indicator
https://github.com/firstandthird/pprogress

Last synced: 3 days ago
JSON representation

Javascript pie style progress indicator

• Host: GitHub
• URL: https://github.com/firstandthird/pprogress
• Owner: firstandthird
• License: mit
• Created: 2013-09-23T14:53:03.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-12-23T17:41:30.000Z (about 8 years ago)
• Last Synced: 2025-01-10T00:34:51.887Z (13 days ago)
• Language: JavaScript
• Size: 287 KB
• Stars: 1
• Watchers: 6
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#pprogress

jQuery plugin for a pie style progress inidcator.  Heavily inspired by iOS7 and [nprogress](http://ricostacruz.com/nprogress/).

![screenshot](https://raw.github.com/firstandthird/pprogress/master/screenshot.png)

##Installation

###Bower

`bower install pprogress`

###Manual Download

- [Development]()

- [Production]()

##Usage

###Basic

```javascript

//element that the pie indicator will get appended to

var el = $(selector);

//init

el.pprogress()

//start progress

el.pprogress('start')

//work gets done

//work complete

el.pprogress('done')

```

###Advanced

####Options (defaults shown)

```javascript

$(selector).pprogress({

	width: 100, //size of pie indicator

	fillColor: "rgba(0,0,0,0.25)", //color of pie chart

  speed: 500, //speed for fake loader

  rate: 0.02, //modifier for inc() and start(). Will by multiplied by Math.random()

  cap: 0.90, //max percent complete start() will go

  ease: function(t, b, c, d){} //easing function to use. See: http://www.gizma.com/easing/ for available functions

})

```

####Start

Starts a fake loader that calls inc() at configured rate.You will need to call done() when you're ready for it to finish. Will max out at 90% or configured cap. If you pass in true the random loader will be disabled.

```javascript

$(selector).pprogress('start');

```

```javascript

$(selector).pprogress('start', true);

```

####Set

Sets the current percent complete.

```javascript

$(selector).pprogress('set', 0.5)

```

####Increment

Increments by random amounts. 

```javascript

$(selector).pprogress('inc')

```

####Tick

Incremements by a set amount. Adds passed value to existing percent complete.

```javascript

$(selector).pprogress('tick', 0.02);

````

####Done

Sets completion to 100%

```javascript

$(selector).pprogress('done');

```

##Development

###Requirements

- node and npm

- bower `npm install -g bower`

- grunt `npm install -g grunt-cli`

###Setup

- `npm install`

- `bower install`

###Run

`grunt dev`

###Tests

`grunt mocha`