A Pen by kaushalya.

index.html

<div class='circle'>
  <div class='round'></div>
  <div class='needle'></div>
</div>
<div class='footer'>2013 By <a href="http://seebeetee.com">Kaushalya Mandaliya</div>

Pure-css-Needle.markdown

Pure css Needle

Based on pen by Jeff Ayer But This pen is pure css.

A Pen by kaushalya on CodePen.

License.

script.js

/*
 * Based on pen by Jeff Ayer. (But This is pure css)
 * (http://codepen.io/DeptofJeffAyer/details/ufxKq)
 *
 * 2013 by Kaushalya Mandaliya.
 * https://twitter.com/kmandalwala
 * http://seebeetee.com
 */

style.scss

@import "compass";
body {
  background: #acbdfe;
}

.circle {
  width: 12em;
  height: 12em;
  margin: 4em auto;
  background: #51bbb5;
  overflow: hidden;  
  border-radius: 50%;
  border: 0.5em solid #fff;
  
  .round {
     height: 4em;
     width: 8em;
     border-radius: 5.5em 5.5em 0.5em 0.5em;
     border: 0.5em solid #fff;
     border: {
       bottom: transparent;  
     }
     margin: 2.5em 1.5em;
  }
  
  .needle {
    height: 1em;
    width: 1em;
    background: #fff;
    margin: -3em 5.4em;
    border-radius: 50%;
    
    
    &:before {
      position: absolute;
      content: '';
      height: 0.1em;
      width: 0.1em;
      border-bottom: 3.9em solid #fff;
      transform: rotate(90deg);
      border: {
        right: 0.4em solid transparent;  left: 0.4em solid transparent;
      }
      margin: -1.47em 2.2em;
      animation: pegIt 3s ease-in-out infinite ;
      
    }
  }
}

@keyframes pegIt {
    
  20% {
    transform: rotate(40deg);
    margin: -3.09em 1.3em;
  }
  
  40% {
    transform: rotate(10deg);
    margin: -3.39em 0.4em;
  }
  
  60% {
    transform: rotate(-20deg);
    margin: -3.29em -0.7em;
  }
  
  100% {
    transform: rotate(-60deg);
    margin: -2.4em 0 -2.69em -1.7em;
  }
  
}
.footer {
  position: absolute;
  bottom: 0;
  right: 0.5em;
  color: #9b59b6;
  font: {
    size: 1.3em;
    family: 'Open sans',sans-serif;
    weight: bold;
  }  
  a {
    text-decoration: none;
    color: inherit;
  }
}