Pacman Progress Bar
An HTML5 canvas-based progress bar with Pac-Man animation.
Installation
-
Install the component via npm.
$ npm install --save pacprogress -
Include
pacprogress.js
to your project.
Note: JQuery is required by the package.
Usage
-
You can
require
the module under CommonJS standardvar PacProgress = ;Or
define
it via AMDrequire;;If you are not using any module loader, a global variable
window.PacProgress
is exposed by us. Use It Directly! -
Initialize a
canvas
tag in your HTML template.The width and height can be modified due to your app's needs. However, a width not less than 100 and height not less 10 is preferred for better animation performance.
-
Construct a
PacProgress
object withselector
andoptions
. Detailedoptions
can be found in API part.var pacProgress = '#pac-progressbar'width: 800height: 20totalDots: 30; -
Draw the progress bar with your
percentage
pacProgress;
API
The progress object is initialized like:
var pacProgress = selector options;
where selector
is a jQuery selector used to target your <canvas>
, while options
can be configured with following APIs.
Props | Type | Description | Default Value |
---|---|---|---|
width | Number | Required. Width of the canvas | N/A |
height | Number | Required. Height of the canvas | N/A |
pacmanColor | String | Color of the pacman | '#fffb00' |
dotColor | String | Color of dots | '#333333' |
totalDots | Number | Total number of dots in the progressbar | 50 |