Circles CSS

http://davidwalsh.name/demo/css-circles.php

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}

#circle1 {
width: 200px;
height: 200px;
background: green;
}

#circle2 {
width: 125px;
height: 125px;
background: red;
}

#circle3 {
width: 100px;
height: 100px;
background: blue;
position: relative;
}

#circle4 {
width: 50px;
height: 50px;
background: orange;
position: absolute;
top: 24%;
left: 24%;
display: block;
border: 3px solid #fff;
}

@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}

#advanced {
width: 200px;
height: 200px;

background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);


/* webkit chrome, safari, mobile */
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 3s; /* 3 seconds */
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  /* mozilla ff */
  -moz-animation-name: spin; 
  -moz-animation-duration: 3s; /* 3 seconds */
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  /* microsoft ie */
  -ms-animation-name: spin; 
  -ms-animation-duration: 3s; /* 3 seconds */
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;
}

<h2>Basic Circles</h2>
<div id="circle1" class="circle"></div>
<div id="circle2" class="circle"></div>
<div id="circle3" class="circle"><div id="circle4" class="circle"></div></div>

<h2>Spinning Gradient Circle</h2>
<div id="advanced" class="circle"></div>

http://blog.avtex.com/2012/03/23/friday-fun-create-a-pulsing-circle-with-css-and-jquery/

$(document).ready(function() {
    //inflate the circle on page load
    circle_inflate();
});
//inflates circle 10px, adjusts positioning to match, then calls deflate function
function circle_inflate() {
    $("#circle").animate( {
        height: 420,
        width:420,
        left:90,
        top:90
    },700,function(){circle_deflate();});
}
//deflates circle and positioning back to original, then calls inflate function
function circle_deflate() {
    $("#circle").animate( {
        height: 400,
        width:400,
        left:100,
        top:100
    },700,function(){circle_inflate();});
}