JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<canvas id="progress" width="40" height="40"></canvas>

CSS

#progress {
    display: block;
}

JavaScript

Fx.prototype.step = function(now) {
    var props;
    if (this.options.frameSkip) {
        var diff = (this.time != null) ? (now - this.time) : 0,
            frames = diff / this.frameInterval;
        this.time = now;
        this.frame += frames;
    } else {
        this.frame++;
    }

    if (this.frame < this.frames) {
        var delta = this.transition(this.frame / this.frames);
        this.set(props = this.compute(this.from, this.to, delta));
    } else {
        this.frame = this.frames;
        this.set(props = this.compute(this.from, this.to, 1));
        this.stop();
    }

    this.fireEvent("step", [props]);
};

var Player = new Class({

    Implements: [Options, Events],

    options: {
        canvasStyles: {}
    },

    initialize: function(options) {
        this.setOptions(options);
        this.progress = {};

        this.progress.base = document.id('progress');
        this.progress.ctx = this.progress.base.getContext('2d');
        //this.progress.imd = null;
        this.progress.circ = Math.PI * 2;
        this.progress.quart = Math.PI / 2;
        this.progress.ctx.beginPath();
        this.progress.ctx.strokeStyle = '#BF593D';
        this.progress.ctx.lineCap = 'square';
        this.progress.ctx.shadowOffsetX = 0;
        this.progress.ctx.closePath();
        this.progress.ctx.fill();
        this.progress.ctx.lineWidth = 5.0;
        this.progress.imd = this.progress.ctx.getImageData(0, 0, 40, 40);

        var fx = new Fx({
            duration: 10000,
            onStep: function(step) {
                this.onProgressUpdate(step);
            }.bind(this)
        });

        fx.start(0,100);

    },

    draw: function(current) {
        this.progress.ctx.putImageData(this.progress.imd, 0, 0);
        this.progress.ctx.beginPath();
        this.progress.ctx.arc(20, 20, 15, -(this.progress.quart), ((this.progress.circ) * current) - this.progress.quart, false);
        this.progress.ctx.stroke();
    },

   ...