Ajax Loader
HTML 
<div class='container'>
1
<div class='container'>
2
  <div class='square'>
3
    <div class='inner'>
4
      <div class='inner'>
5
        <div class='inner'>
6
          <div class='inner'>
7
            <div class='inner'>
8
              <div class='inner'>
9
                <div class='inner'>
10
                  <div class='inner'>
11
                    <div class='inner'>
12
                      <div class='inner'>
13
                        <div class='inner'>
14
                          <div class='inner'>
15
                            <div class='inner'>
16
                              <div class='inner'>
17
                                <div class='inner'>
18
                                  <div class='inner'>
19
                                    <div class='inner'>
20
                                      <div class='inner'>
21
                                        <div class='inner'>
 
CSS 
.container {
1
.container {
2
  position:relative;
3
  width:100%;
4
  height: 0;
5
  padding-bottom: 100%;
6
}
7
.square {
8
  position:absolute;
9
  top:50%; left:50%;
10
  -webkit-animation:enlarge 2s infinite;
11
  animation:enlarge 2s infinite;
12
  -webkit-transform:scale(0.416);
13
  transform:scale(0.416);
14
}
15
.inner {
16
  position:absolute;
17
  top:50%; left:50%;
18
  margin-top:-35.4%;margin-left:-35.4%;
19
  height:70.8%; width:70.8%;
20
  background:rgb(27,27,27);
21
  -webkit-transform:rotate(45deg);
22
  transform:rotate(45deg);
23
}
24
.square > .inner { -webkit-transform:rotate(0deg); }
25
html,body { width:100%; height:100%; }
26
@keyframes enlarge {
27
  50%  { -webkit-transform:scale(0.588) rotate(45deg); transform:scale(0.588) rotate(45deg); }
28
  100% { -webkit-transform:scale(0.83) rotate(90deg); transform:scale(0.83) rotate(90deg); }
29
}
 
JavaScript 
// Because the CSS4 selector :match is not implemented, we have to use javascript to color the even boxes
1
// Because the CSS4 selector :match is not implemented, we have to use javascript to color the even boxes
2
var inner = document.getElementsByClassName("inner");
3
for(var i = 0; i < inner.length; i++) {
4
  if(i % 2 !== 0) inner[i].style.background = "white";
5
}
6
 
7
// Scale up the elements here so the CSS can scale down them without issue
8
var square = document.getElementsByClassName('square')[0];
9
window.onresize = function() {
10
  var height = parseInt(getComputedStyle(document.getElementsByClassName('container')[0], null).paddingBottom) * 3.4;
11
  square.style.height = height + "px";
12
  square.style.width = height + "px";
13
  square.style.marginLeft = - height/2 + "px";
14
  square.style.marginTop = - height/2 + "px";
15
}
16
window.onresize();
 

Attempt at infinite zooming

CSSDeck G+