JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/photonstorm/phaser/master/build/phaser.min.js"></script>

JavaScript

var game;

function Square() {
    this.filling = true;
    this.progress = 0;
    this.radius = 100;
    this.color = 0xFF3300;
    this.speed = 0.5;
    this.x = 0;
    this.y = 0;
    this.rotation = 0;
    this.graphics = game.add.graphics(0, 0);
}

Square.prototype.render = function() {
    this.graphics.clear();
    this.graphics.beginFill(0xFF3300);
    this.graphics.lineStyle(1,0x00FF00,1);

    var radians = Math.PI / 180;

    this.graphics.moveTo(this.x, this.y);
    var perc = parseInt(this.progress);
    var tot = this.filling ? perc : 360 - perc;
    var start = this.clockwise ? 0 : 360 - tot;
    var end = this.clockwise ? tot : 360;

    for (var i = start; i <= end; i++) {
        var ax = this.radius * Math.cos((i + this.rotation) * radians);
        var ay = this.radius * Math.sin((i + this.rotation) * radians);
        this.graphics.lineTo(ax + this.x, ay + this.y);
    }

    this.graphics.lineTo(this.x, this.y);

};

Square.prototype.update = function() {
    this.progress = this.progress + this.speed;
    if (this.progress > 360) {
        this.progress = 0;
    }
};
(function(){
    game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create,update: update, render: render });
    var square;

    function preload() {
    }

    function create() {
        square = new Square();
        square.x = 200;
        square.y = 200;
        square.radius = 30 + parseInt(Math.random() * 100);
        square.progress = 0;
        //square.rotation = parseInt(Math.random() * 360);
        //square.clockwise = Math.random() * 2 > 1 ? true : false;
        square.clockwise = false;
        square.filling = true;
    }

    function update() {
        square.update();
    }

    function render() {
        square.render();
    }
 })();