Loading animation circle

index.html

<div class="loading">

  <div class="circle">
    <div class="circleInlet"></div>
  </div>

</div>

<p>Thanks to <a href="http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle">wdebeaum</a> for some  Math help.</p>

Loading animation circle.markdown

Loading animation circle

Loading animation that can be easily customised to change the look of the:

1. Scale
2. Color
3. Custom image
4. Speed
5. Shape/Animation -- to a lesser extent
6. Position

A Pen by Dirk Teucher on CodePen.

License.

script.js

	var radius = 120;
	var angleInDegrees = 0;
	var centerX = $(".loading").position().top;
	var centerY = $(".loading").position().left;
	var x = 0;
	var y = 0;


	setInterval(function(){
		polarToCartesian(centerX,centerY,radius,angleInDegrees);
		angleInDegrees+=19;//Modify this to change the shape

		//Trim out excess elements as new ones are created. This is not efficient but the point is that this is a method that can use any images and has a lot of flexibility.
		if($( ".loading" ).children().length >20 ){
			$(".loading div:nth-child(2)").remove();
		}
	}, 60);//Increase or decrease the speed ... requires configuring other areas of the javascript if any drastic changes made
	

	function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
		var angleInRadians = angleInDegrees * Math.PI / 20.0;//Increase decrease the appearance of speed
		x = centerX + radius * Math.cos(angleInRadians);//Calculate the angle and position where the circleInlet will be placed
		y = centerY + radius * Math.sin(angleInRadians);//Calculate the angle and position where the circleInlet will be placed
		
		$( ".circle div" ).clone().appendTo( ".loading" ).css("position", "absolute").css("top", x).css("left", y).animate({
			opacity: 0,
		},1300);
	};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.circle {
	display:none;

}
.loading{

	width: 100px;
	height:100px;
	position: relative;
	left:400px;
	top: 80px;


    /*Modify these to scale up or down the animation and add these into circleInlet to change the scale easily*/
    -ms-transform: scale(0.2,0.2); /* IE 9 */
    -webkit-transform: scale(0.2,0.2); /* Safari */
    transform: scale(0.2,0.2);

}


/*The animation frames to demonstrate how this could be customised using some css3 filters and transforms*/
@-moz-keyframes loading { /* Firefox */
    0%, 100%   {
        -ms-transform: scale(0.2,0.2); /* IE 9 */
        -webkit-transform: scale(0.2,0.2); /* Safari */
        transform: scale(0.2,0.2);
        filter: brightness(0.75);
        filter: hue-rotate(0deg);/*Change the colors easily*/
    }
    50% {
        -ms-transform: scale(1.2,1.2);
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
        -webkit-filter: brightness(2);
        filter: hue-rotate(360deg);
    }
}
@-webkit-keyframes loading { /* Webkit */
    0%, 100%   {
        -ms-transform: scale(0.2,0.2);
        -webkit-transform: scale(0.2,0.2);
        transform: scale(0.2,0.2);
        -webkit-filter: brightness(100%);
        -webkit-filter: hue-rotate(0deg);
    }
    50% {
        -ms-transform: scale(1.2,1.2);
        -webkit-transform: scale(1.2,1.2);
        transform: scale(1.2,1.2);
        -webkit-filter: brightness(200%);
        -webkit-filter: hue-rotate(360deg);
    }
}
/*Initialise animation and set parameters*/
.loading {
    animation:         loading 5s infinite; /* CSS3 */
    -moz-animation:    loading 5s infinite; /* Firefox */
    -webkit-animation: loading 5s infinite; /* Webkit */
}


.circleInlet {
    position: absolute;
    border-radius: 50%;
    /*Swop out this image for your own but the size of the image if not 844 by 745 pixels will need adjustments made to these parameters for it to fit correctly*/
    background-image: url("http://www.incrediblepebble.com/pubImages/blueMarble.png");
    background-repeat: no-repeat;
    background-size: 42px;
    background-position: -6px -2px;
    width: 30px;
    height: 30px;
    box-shadow: 10px 10px 10px #00214D;
}