Edit in JSFiddle

var canvas = null;
var context = null;
var rotateAngle = null;
var showGuideGrid = true; // set to false to hide the drawing assistance grid
var animateTheLoader = true; // set to false to disable animation and see the static drawing

$(document).ready(function () {
    canvas = $("#myCanvas").get(0);
    context = canvas.getContext("2d");
    rotateAngle = 0;

    if (animateTheLoader) {
        loadingAnimation();
    }
    else {
        loadingDrawing();
    }
});

function renderGuideGrid(gridPixelSize, color) {
    context.save();
    context.lineWidth = 0.5;
    context.strokeStyle = color;

    // horizontal grid lines
    for(var i = 0; i <= canvas.height; i = i + gridPixelSize)   {
        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(canvas.width, i);
        context.closePath();
        context.stroke();
    }

    // vertical grid lines
    for(var j = 0; j <= canvas.width; j = j + gridPixelSize)  {
        context.beginPath();
        context.moveTo(j, 0);
        context.lineTo(j, canvas.height);
        context.closePath();
        context.stroke();
    }

    context.restore();
}

function loadingDrawing() {
    context.save();

    if (showGuideGrid) {
        renderGuideGrid(20, "red");
    }

    context.translate(150, 150);
    context.rotate(rotateAngle * Math.PI/180);
    context.translate(-150, -150);

    context.beginPath();
    context.strokeStyle = "white";
    context.lineWidth = 15;
    context.lineCap = "round";

    context.fillStyle = "rgba(255,255,255,1)";
    context.moveTo(150, 120);
    context.lineTo(150, 50);
    context.stroke();

    context.strokeStyle = "rgba(255,255,255,0.8)";
    context.moveTo(130, 130);
    context.lineTo(80, 80);
    context.stroke();

    context.strokeStyle = "rgba(255,255,255,0.5)";
    context.moveTo(120, 150);
    context.lineTo(50, 150);
    context.stroke();

    context.strokeStyle = "rgba(255,255,255,0.35)";
    context.moveTo(130, 170);
    context.lineTo(80, 220);
    context.stroke();

    context.strokeStyle = "rgba(255,255,255,0.2)";
    context.moveTo(150, 180);
    context.lineTo(150, 250);
    context.stroke();

    context.closePath();

    context.save();

    context.restore();
}

function loadingAnimation() {
    canvas.width = canvas.width; // redraw canvas for animation effect

    loadingDrawing();

    rotateAngle += 5;

    if (rotateAngle > 360) {
        rotateAngle = 5;
    }

    setTimeout(loadingAnimation, 30);
}

 <canvas id="myCanvas" width="300" height="300">
     <p>Canvas not supported.</p>
 </canvas>

body {
    background-color: #997755;
}