Loading Spinner

[gaffling]

If you are looking for a pure CSS Loading Spinner that fits to the BareCSS Design you can use this:

      spinner {
        display: inline-block;
        position: relative;
        width: 64px;
        height: 64px;
      }
      spinner s {
        display: inline-block;
        position: absolute;
        width: 13px;
        background: #679;
        animation: spinner 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
      }
      spinner s:nth-child(1) {
        left: 6px; animation-delay: -0.24s;
      }
      spinner s:nth-child(2) {
        left: 26px; animation-delay: -0.12s;
      }
      spinner s:nth-child(3) {
        left: 45px; animation-delay: 0;
      }
      @keyframes spinner {
         0%       { top:  6px; height: 51px; }
        50%, 100% { top: 19px; height: 26px; }
      }

and this you need in the HTML Part:

      <spinner>
        <s></s>
        <s></s>
        <s></s>
      </spinner>

Please Comment what do you think about ;-)