Ajax Loader
×
HTML
.circle
1
.circle
2
  p top
3
  p right
4
  p bottom
5
  p left
6
  .box Wheee!
7
  
8
 
9
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
$size: 400px;
1
$size: 400px;
2
body {
3
  margin: 2rem;
4
}
5
.circle {
6
  position: relative;
7
  width: $size;
8
  height: $size;
9
  background: #8CF;
10
  border-radius: $size/2;
11
}
12
p {
13
  position: relative;
14
  top: -2.5rem;
15
  display: inline-block;
16
  height: 1rem;
17
  background: #EEE;
18
  padding: 0 0.25rem 0.4rem;
19
  cursor: pointer;
20
  border: 2px outset rgba(#EEE, 0.5);
21
  border-radius: 0.4em;
22
}
23
.box {
24
  background: #EEE;
25
  height: 2rem;
26
  width: 4rem;
27
  position: absolute;
28
  /*  Transfom origin at the center of the circle  */
29
  top: 50%;
30
  left: 50%;
31
  /*  The first translate centers the element,
32
      the second rotates it,
33
      the third offsets it to the circle's edge,
34
      the fourth rotates it back to preserve the element's orientation */
35
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-$size/2) rotate(90deg);
36
  transition: transform 1s ease-out;
37
  /*  Center the contents  */
38
  display: flex;
39
  justify-content: center;
40
  align-items: center;
41
}
 
JavaScript
$(".circle").on("click", "p",  function(e) {
1
$(".circle").on("click", "p",  function(e) {
2
  var deg = $(e.target).html()
3
  deg = deg === "top"    ? 0 : // corresponding angle values
4
        deg === "right"  ? 90 :
5
        deg === "bottom" ? -180 :
6
        deg === "left"   ? -90 : 0;
7
  rotateTo(deg);
8
});
9
 
10
function rotateTo(deg) {
11
  var bplate = [
12
    "translate(-50%,-50%) rotate(", -90, "deg) translateY(-200px) rotate(", 90, "deg)"
13
  ];
14
  bplate[1] = deg;
15
  bplate[3] = 0-deg;
16
  $(".circle>.box").css({
17
    "transform": bplate.join("")
18
  });
19
}
 

Animating along a circle (CSS)

CSSDeck G+