Create your own loading circle without any images

Steps:

1.Get relative code here

2.Goto your HTML file..add this style tag in head tag

<style type=”text/css”>
body, html {
margin:0;
padding:0;
overflow:hidden;
background-color:#ffffff;
}
.wrapper_circle {
position:absolute;
//top:50%;
left:5%;
}
</style>

3.Copy this script tags in between head tags..

<script src=”http://heartcode-canvasloader.googlecode.com/files/heartcode-canvasloader-min-0.9.1.js”></script&gt;
<script src=”http://code.jquery.com/jquery-1.9.0.min.js”></script&gt;

4.Add this code before </body> tag

<input type=”button” name=”button” id=”button” value=”Button”/>

<div id=”canvasloader-container” class=”wrapper_circle” style=”display:none”></div>

</div>
<script type=”text/javascript”>
var cl = new CanvasLoader(‘canvasloader-container’);
cl.setDiameter(23); // default is 40
cl.setDensity(33); // default is 40
cl.setRange(1.1); // default is 1.3
cl.setFPS(19); // default is 24
cl.show(); // Hidden by default

// This bit is only for positioning – not necessary
var loaderObj = document.getElementById(“canvasLoader”);
loaderObj.style.position = “absolute”;
loaderObj.style[“top”] = cl.getDiameter() * -0.5 + “px”;
loaderObj.style[“left”] = cl.getDiameter() * -0.5 + “px”;
</script>

5. Add this code after </body> and before </html> tags

<script>
$(“:input”).click(function () {
//alert(”);
$(“#canvasloader-container”).show();
});</script>

6. Now run your page and click button to see loading circle..thats it 🙂

Even you can try facebook loader from here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s