JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<canvas id='preloader'></canvas>

JavaScript

animation_counter = 0;
setInterval(function () {
    var canvas = document.getElementById('preloader');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    context.translate(canvas.width / 2, canvas.height / 2);

    context.rotate(animation_counter * 0.1);
    var radius = 6;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 1;
    context.strokeStyle = '#F2A2A2';
    context.stroke();

    context.rotate(animation_counter * 0.1);
    radius = 10;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 1;
    context.strokeStyle = '#6FE2E4';
    context.stroke();

    context.rotate(animation_counter * 0.1);
    radius = 15;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 1.5;
    context.strokeStyle = '#F2A2A2';
    context.stroke();

    context.rotate(animation_counter * 0.1);
    radius = 20;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 2;
    context.strokeStyle = '#9FD4EF';
    context.stroke();

    context.rotate(animation_counter * 0.1);
    radius = 25;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 3;
    context.strokeStyle = '#FAD956';
    context.stroke();

    context.rotate(animation_counter * 0.1);
    radius = 30;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 3;
    context.strokeStyle = '#F2A2A2';
    context.stroke();


    context.rotate(animation_counter * 0.1);
    radius = 35;
    context.beginPath();
    context.arc(0, 0, radius, 1 + Math.PI, 2 * Math.PI, false);
    context.lineWidth = 3;
    context.strokeStyle =...