CSS3 анимация загрузки

Прелоадер на CSS3 в котором используется два вида анимации: выцветание теругольников и анимация поворота всего элемента. Все вместе эти анимации позволяют создать довольно неплохой эффект.

HTML

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

CSS

Поскольку выцветание всех трех треугольников происходит постепенно, то мы должны установить задержку анимации.
Обратите внимание на промежуток между 20% и 100% для вращения keyframes, это позволяет достичь эффекта остановки анимации.

        .loading-wrap{
          width: 60px; height: 60px;
          position: absolute;
          top: 50%; left: 50%;
          margin: -30px 0 0 -30px;
          background: #777;      
          -moz-animation: rotation ease-in-out 2s infinite;
          -webkit-animation: rotation ease-in-out 2s infinite;
          -ms-animation: rotation ease-in-out 2s infinite;
          animation: rotation ease-in-out 2s infinite;
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          border-radius: 30px;      
        }

        .triangle1, .triangle2, .triangle3{
          border-width: 0 20px 30px 20px;
          border-style: solid;
          border-color: transparent;
          border-bottom-color: #67cbf0;
          height: 0; width: 0;
          position: absolute;
          left: 10px; top: -10px;
          -moz-animation: fadecolor 2s 1s infinite;
          -webkit-animation: fadecolor 2s 1s infinite;
          -ms-animation: fadecolor 2s 1s infinite;
          animation: fadecolor 2s 1s infinite;
        }

        .triangle2, .triangle3{
          content: '';
          top: 20px; left: 30px;
          -moz-animation-delay: 1.1s;
          -webkit-animation-delay: 1.1s;
          -ms-animation-delay: 1.1s;
          animation-delay: 1.1s;
        }

        .triangle3{
          left: -10px;
          -moz-animation-delay: 1.2s;
          -webkit-animation-delay: 1.2s;
          -ms-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }

        @-moz-keyframes rotation
        {
            0% {-moz-transform: rotate(0deg);}
            20% {-moz-transform: rotate(360deg);}
            100% {-moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotation
        {
            0% {-webkit-transform: rotate(0deg);}
            20% {-webkit-transform: rotate(360deg);}
            100% {-webkit-transform: rotate(360deg);}
        }
        
        @-ms-keyframes rotation
        {
            0% {-webkit-transform: rotate(0deg);}
            20% {-webkit-transform: rotate(360deg);}
            100% {-webkit-transform: rotate(360deg);}
        }        

        @keyframes rotation
        {
            0% {transform: rotate(0deg);}
            20% {transform: rotate(360deg);}
            100% {transform: rotate(360deg);}
        }          

        @-moz-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }

        @-webkit-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }
        
        @-ms-keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }        

        @keyframes fadecolor
        {
            0% {border-bottom-color: #eee;}
            100%{border-bottom-color: #67cbf0;}
        }