# Edit in JSFiddle

```//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 = colorBody;
context.stroke();
context.closePath();

}
function drawTriangle(endAngle){

//The bloody part: draw the triangle.
//A lot of old trigos tricks:

//First the center of the triangle base (where we start to draw the triangle)
var canterBaseArrowX = x + radius * Math.cos( endAngle );
var canterBaseArrowY = y + radius * Math.sin( endAngle );

context.beginPath();

//We move to the center of the base
context.moveTo( canterBaseArrowX, canterBaseArrowY );

//Let's calculate the first point, easy!
var ax = canterBaseArrowX + (triangleSide / 2 ) * Math.cos( endAngle );
var ay = canterBaseArrowY + (triangleSide / 2 ) * Math.sin( endAngle );
context.lineTo ( ax, ay );

//Now time to get mad: the farest triangle point from the arrow body
var bx = canterBaseArrowX + ( Math.sqrt( 3 ) / 2 ) * triangleSide * ( Math.sin( -endAngle ));
var by = canterBaseArrowY + ( Math.sqrt( 3 ) / 2 ) * triangleSide * ( Math.cos( -endAngle ));
context.lineTo(bx,by);

//Easy , like the a point
var cx = canterBaseArrowX - ( triangleSide / 2 ) * Math.cos( endAngle );
var cy = canterBaseArrowY - ( triangleSide / 2 ) * Math.sin( endAngle );
context.lineTo( cx,cy );

//and back to the origin, the center of the triangle base.
context.lineTo( canterBaseArrowX, canterBaseArrowY );

context.lineWidth = arrowStrength;

//Stroke it with color!
context.strokeStyle = colorTriangle;
context.stroke();
context.closePath();
}```
```<div id="loadingAnimation"><canvas id="c"></canvas></div>
```
```#c{
height:100%;
width:100%;
position:relative;
-webkit-animation: rotate-left 2s linear infinite;

}