Loading Css – Animação X Y

Veja como fazer um Loading Css – Animação X Y com html e Css.

Vamos Adicionar o Html:

<div class="loading"></div>

Vamos Adicionar o Css:

  .loading{

  	width:45px;
  	height:45px;
  	background-color:#00cdd2;
  	margin:0 auto;
  	top:85px;
  	position:static;
  	-webkit-animation:rotateplane 1.2s infinite ease-in-out;
  	animation:rotateplane 1.2s infinite ease-in-out;

  }

  	@-webkit-keyframes rotateplane {
        
        0% { -webkit-transform: perspective(120px) }
        50% { -webkit-transform: perspective(120px) rotateY(180deg) }
        100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

    }@keyframes rotateplane {
        
        0% {
       
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
       
        } 50% {
       
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 
        } 100% {
            
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

Veja o Resultado !

Baixar Código Veja Funcionando