JSFiddle - React, Tailwind, and code Playground

by edoardoo

HTML

<div id="loadingAnimation"><canvas id="c"></canvas></div>

CSS

#c{
    height:100%;
    width:100%;
    position:relative;
    -webkit-animation: rotate-left 2s linear infinite;
    
}
#loadingAnimation{
    position:relative;
    height:100px;
    width:200px;
}
@-webkit-keyframes rotate-left
{
    
/*let's do the magic: rotate!*/
  from { -webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}

JavaScript

//This little script will draw two curved arrows into a canvas, the CSS3 will make it rotating.
//It's very verbose because of learning purpose. Feel free to share it!
//Author: Edoardo Odorico and some help from Baldarn (2013)  - Licensed Under Creative Commons CC-BY-SA

//let's define some variables for stylish stuff:
var radius = 50;
var arrowStrength = 18;
var triangleSide = 20;  
var distanceArrows = 0.3; //this is the distance ( n * pi) between the arrows, do not exagerate
var colorBody = '#313131';
var colorTriangle = '#000000';

//now some variables for canvas and math 
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var x = canvas.width / 2; //the center on X axis
var y = canvas.height / 2; //the center on Y axis
var pi = Math.PI;

//and let's draw the arrows!
drawArrow( distanceArrows, arrowStrength );


function drawArrow(distanceArrows, arrowStrength){
    
    //From here I will call two functions, for body and for triangle, twice. 
   
    //But first of all let's calculate the angle of the arc (for arrow body)
    var lengthArrow = 1 - distanceArrows;
    var startAngle = 0;
    var endAngle = lengthArrow ;
    
    //draw it!
    drawArrowBody( startAngle * pi, endAngle * pi, arrowStrength );
    
    //and now draw the triangle:
    drawTriangle( endAngle * pi );
    
    //math for the other arrow and...
    startAngle = endAngle + distanceArrows;
    endAngle = startAngle + lengthArrow ;
    
    //...draw them!
    drawArrowBody( startAngle * pi, endAngle * pi, arrowStrength );
    drawTriangle( endAngle * pi);
   
}
function drawArrowBody( startAngle, endAngle, arrowStrength ){
    //In this function we draw the body of the arrow, which is just an arc
    
	var counterClockwise = false;

	context.beginPath();
    //draw it!
	context.arc( x, y, radius, startAngle, endAngle, counterClockwise );
    //stroke it!
	context.lineWidth = arrowStrength;   
	context.strokeStyle =...