Edit in JSFiddle

var canvas = null;
var context = null;
var rotateAngle = null;
var showGuideGrid = false; // 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 = document.getElementById("myCanvas");
    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(37.5, 37.5);
    context.rotate(rotateAngle * Math.PI/180);
    context.translate(-37.5, -37.5);

    context.save();

    context.beginPath();
    context.strokeStyle = "rgba(255,255,255,0.3)";
    context.lineWidth = 4;
    context.lineCap = "round";

    context.moveTo(37.5, 26.5);
    context.lineTo(37.5, 13.5);
    context.stroke();

    context.moveTo(31.5, 31.5);
    context.lineTo(20, 20);
    context.stroke();

    context.moveTo(29, 37.5);
    context.lineTo(12.5, 37.5);
    context.stroke();

    context.moveTo(32.5, 43.5);
    context.lineTo(20, 55);
    context.stroke();

    context.moveTo(37.5, 46);
    context.lineTo(37.5, 62.5);
    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, 16);
}

//simple script to rotate all spinners 45 degrees on each tick
//this works differently from the css transforms, which is smooth

var count = 0;
function rotate() {    
    var elem3 = document.getElementById('loader');
    
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 100);
}

if (animateTheLoader) {
    window.setTimeout(rotate, 100);
}

<div id="sandbox">
    <div id="canvas_test">

        <h2>Canvas Loader</h2>

        <canvas id="myCanvas" width="75" height="75">
            <p>Canvas not supported.</p>
        </canvas>
        </div>
    
     <div id="css3_test">

        <h2>CSS3 Loader</h2>

        <div id="loader">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
            <div class="bar4"></div>
            <div class="bar5"></div>
        </div>
         
      </div>
</div>

/* main */

body {
    background-color: #000;
    padding-top: 20px;
    color: #fff;
}

#css3_test {
    padding-top: 20px;
}

h2 {
    font: 30px Georgia,Utopia,'Palatino Linotype',Palatino,serif;
    font-size: 16px;
}

#sandbox {
    text-align: center;
}

/* CSS3 styles */
/* position the bars and balls correctly (rotate them and translate them outward)*/
.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);opacity:1;
}
.bar2 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);opacity:.8;
}
.bar3 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.5;
}
.bar4 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.35;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.2;
}

/* set up the three bar spinners */
#loader {
    position:relative;
    width:100px;
    height:100px;
    -moz-border-radius:100px;
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    margin: auto;
}

#loader div {
    width:10px;
    height:30px;
    background:#FFFFFF;
    position:absolute;
    top:35px;
    left:45px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
}