Preview Download

Images

We would require two images. A background and semi circle for the loading bar
.

HTML

The markup is quite simple. You need a square div that will host the loading circle. This div is split up into two parts, the right side and the left side. The right side is used to show the image moving from 0% to 50%. In this time, the left side is made to hide the part of the image that should not be shown.

Once its reached 50%, you can then fix the right side and move the left side to show everything 50%+. The figure below explains what I mean.

What we want to do is rotate the semi circle to create an illusion.

By controlling when to hide and more the div. You can create a circular loader.

  
0%
  

  

  

CSS

The css is quite standard. You just need to transform one div called the right side to move the bar. CSS3 will let us do that.

body {
	margin: 0;
	padding: 0;
}

#loadingCircle {
	height: 192px;
	width: 192px;
	margin: 200px;
	background: url(images/loadingBackground.png);
}

#loadingCircle #loadPercent {
	height: 117px;
	width: 192px;
	position: absolute;
	z-index: 6;
	font-size: 36px;
	text-align: center;
	padding-top: 75px;
}

#loadingCircle #rightSide {
	height: 192px;
	width: 192px;
	background: url(images/rightSide.png) no-repeat right;

	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	z-index: 2;
	float: right;
}

#loadingCircle #rightReplace {
	height: 192px;
	width: 96px;
	margin-left: 96px;
	position: absolute;
}

#loadingCircle #leftClip {
	height: 192px;
	width: 96px;
	float: left;
	background: url(images/loadingBackground.png), #FFFFFF;
	z-index: 5;
	position: fixed;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

Javascript

In my example, I am using a slider. You would have to replace that with your own code to make this actually work in a live situation. You can wrap the code in a function that you can call every time you want to change the value that is loaded. Line 3 to 19 is the main code.

$(document).ready(function (e) {
    $('#slider').change(function () {
        loadValue = parseInt($('#slider').val());
        $('#loadPercent').text(loadValue + "%");
        var rotationCalculation = 180 + (360 * (loadValue / 100))
        if (rotationCalculation >= 360) {
            $("#rightReplace").css({
                "background-image": "url(images/rightSide.png)"
            })
            $('#leftClip').css("opacity", '0');
        } else {
            $("#rightReplace").css({
                "background-image": "none"
            })
            $('#leftClip').css("opacity", '1');
        }
        $("#rightSide").css({
            "-webkit-transform": "rotate(" + rotationCalculation + "deg)"
        });
    });
});

Preview Download