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;
    
}
#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);}
}