JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="test"></div>
    <div><button onclick="loader.stop()">Stop</button>
    <button onclick="loader.run()">Start</button></div>

CSS

body{
    background:#888888;
}

JavaScript

/**
 * PiggLoader 
 *　Canvas版 ローディング君
 *
 * Options:
 *  id : canvasId
 *  grobalAlpha : grobalAlpha
 *  fillStyle : fillStyle
 *  strokeStyle: strokeStyle
 *  useCache : ローディング君をgetImageDataして再利用する
 *　  fill:塗りつぶす
 *  size:大きさ
 *  onStart:描画した時
 *  onStop:停止した時
 *  onDestory:削除した時
 */

(function(){
    
var PiggLoader = function(el, options){
    
    this.options = {
        id:'loadingboy-' + String(+ new Date()).slice(6, 10),
        globalAlpha:1,
        fillStyle:'#FFFFFF',
        strokeStyle:'#000000',
        useCache:true,
        fill:true,
        size:78,
        // Events
        onStart:null,
        onStop:null,
        onDestroy: null
    };
    
    for (i in options) this.options[i] = options[i];
    
    this.timer = null;
    this.baseSize = 78;
    this.mag = (Math.round((this.options.size/this.baseSize)*10))/10;
    this.img = [];
    
    
    this.canvas = (typeof el == 'object') ? el : this._create(el);
    
    if (this.canvas.getContext){
      this.ctx = this.canvas.getContext('2d');
    }else{
        return false;
    }
    
    this.frame = [];
    this.frame[0] =...