Create your own loading circle without any images


1.Get relative code here

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

<style type=”text/css”>
body, html {
.wrapper_circle {

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

<script src=””></script&gt;
<script src=””></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>

<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; // Hidden by default

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

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

$(“:input”).click(function () {

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

Even you can try facebook loader from here

Leave a Reply

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

You are commenting using your 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