title: CSS spinner/loading icon does not display on Safari/iPhone
body: <p>I am developing a mobile web application, and need to incorporate a loading spinner.</p>
  
  <p>I have found one from a helpful website, and works on IE, FF and Chrome, but for some reason does not work on Safari on my iPhone 4.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="overlay"&gt;
      &lt;div class="loader"&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.overlay {
      opacity:    0.5; 
      background: #000; 
      width:      100%;
      height:     100%; 
      z-index:    10;
      top:        0; 
      left:       0; 
      position:   fixed;
  }
  .loader {
    width: 0px;
    height: 0px;
    margin: 50vh auto;
    /*position: relative;*/
    position: absolute;
    left: 50%;
    top: -100px;
  }
  
  .loader &gt; div {
    width: 6px;
    height: 20px;
    position: absolute;
    left: -10px;
    bottom: 15px;
    border-radius: 5px;
    transform-origin: 10px 35px;
    transform: rotate(0deg);
    animation: loader 0.8s infinite;
  }
  .loader &gt; div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: 0.1s;
  }
  .loader &gt; div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: 0.2s;
  }
  .loader &gt; div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: 0.3s;
  }
  .loader &gt; div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: 0.4s;
  }
  .loader &gt; div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: 0.5s;
  }
  .loader &gt; div:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: 0.6s;
  }
  .loader &gt; div:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0.7s;
  }
  
  @keyframes loader {
    0% {
      background: transparent;
      left: -10px;
      transform-origin: 10px 35px;
    }
    30% {
      background: white;
    }
    100% {
      background: transparent;
      left: 10px;
      transform-origin: -10px 35px;
    }
  }
  </code></pre>
  
  <p>Plunker: <a href="http://plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview" rel="nofollow">http://plnkr.co/edit/ztBL6TN03yx41t4PRZMM?p=preview</a></p>