loader
JavaScript loading animation.
Preview
- HorizontalLoader
- RoundLoader
Usage
<script src="./loader-xxx.js"></script>
Examples
- Create a HTML file and include with:
<script src="./loader-horizontal.js"></script>
- Create a HTML tag
canvas
:
<canvas id="loader"></canvas>
- 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.