h69/loader

JavaScript loading animation.

loader

JavaScript loading animation.

Preview

• HorizontalLoader

• RoundLoader

Usage

<script src="./loader-xxx.js"></script>

Examples

1. Create a HTML file and include with:

<script src="./loader-horizontal.js"></script>

2. Create a HTML tag canvas：

<canvas id="loader"></canvas>

3. Instantiate the JavaScript object and call function start:

var loader = new HorizontalLoader(document.getElementById('loader'));

loader.start();

API

.init(option)

Initialize the animation optionally, and the option is as follows:

• HorizontalLoader

{
  staticCircleCount: (default: 5),
  staticCircleRadius: (default: 10),
  staticCircleRadiusScaleRate: (default: 0.4),
  fillColor: '(default: #4DB9FF)',
  duration: (default: 2000),
}

• RoundLoader

{
  bigCircleRadius: (default: 50),
  staticCircleRadiusScaleRate: (default: 0.4),
  fillColor: '(default: #4DB9FF)',
  duration: (default: 2000),
}

.start()

Start animation.

.stop()

Stop animation.