JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery Rotator</h1>
<div id="rotator" style="height:300px;width:300px"></div>
<div id="rotator2" style="height:300px;width:300px"></div>
<div id="rotator3" style="height:300px;width:300px"></div>

JavaScript

(function($){
    $.fn.rotator = function(options){
        var settings = $.extend({
            starting: 0,
            ending: 100,
            percentage: true,
            color: 'green',
            lineWidth: 7,
            timer: 10,
            radius: 40,
            fontStyle: 'Calibri',
            fontSize: '20pt',
            fontColor: 'darkblue',
            backgroundColor: 'lightgray',
            callback: function () {
            }
        }, options);
		
		
        var n = Math.random();
        this.empty().append("<canvas height ="+this.height() + " width="+this.width()+" id='my-canvas-"+n+"'/ ></canvas>");
        var canvas = document.getElementById('my-canvas-'+n);
        
		       // var canvas = document.getElementsByClassName('my-canvas');
		var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = settings.radius;
        var context = canvas.getContext("2d");
        if(settings.backgroundColor){
            var ctx = canvas.getContext('2d');
            ctx.arc(x, y, radius, 0, 2*Math.PI, false);
            ctx.strokeStyle = settings.backgroundColor;
            ctx.lineWidth = settings.lineWidth;
            ctx.stroke()
        }
        var steps = settings.ending - settings.starting;
        var step = settings.starting;
        var z = setInterval(function(){
            var text;
            if(settings.percentage){text = step + "%"}else{text = step}
            var start_angle = (1.5 + (step/50))*Math.PI;
            var end_angle = (1.5 + (++step/50))*Math.PI;
            context.beginPath();
            context.arc(x, y, radius, start_angle, end_angle, false);
            context.lineWidth = settings.lineWidth;
            context.strokeStyle = settings.color;
            context.stroke();
            context.font = settings.fontSize + ' ' + settings.fontStyle;
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillStyle =...