PlataformaEducativa/css/loading.css

#preloader5{
    position:relative;
    width:30px;
    height:30px;
    background:#3498db;
    border-radius:50px;
    animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid #9b59b6;
    border-bottom:10px solid #9b59b6;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
    animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}


#preloader6{
    position:relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
}
#preloader6 span{
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;
 
}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
    animation-delay: .2s;
 
}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
    animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
    animation-delay: .6s;
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}


#preloader_3{
    position:relative;
}
#preloader_3:before{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#9b59b6;
    animation: preloader_3_before 1.5s infinite ease-in-out;
}
 
#preloader_3:after{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#2ecc71;
    left:22px;
    animation: preloader_3_after 1.5s infinite ease-in-out;
}
 
@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
    100% {transform: translateX(0px)}
}

#preloader_2{
    position: relative;
    left: 50%;
    width: 40px;
    height: 40px;
    }
    #preloader_2 span{
        display:block;
        bottom:0px;
        width: 20px;
        height: 20px;
        background:#9b59b6;
        position:absolute;
    }
    #preloader_2 span:nth-child(1){
    animation: preloader_2_1 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(2){
    left:20px;
    animation: preloader_2_2 1.5s infinite ease-in-out;
     
    }
    #preloader_2 span:nth-child(3){
    top:0px;
    animation: preloader_2_3 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(4){
    top:0px;
    left:20px;
    animation: preloader_2_4 1.5s infinite ease-in-out;
    }
     
    @keyframes preloader_2_1 {
        0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
        80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
         100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @keyframes preloader_2_2 {
        0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
        80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
        100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @keyframes preloader_2_3 {
        0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
        80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
         100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
     
     
    @keyframes preloader_2_4 {
        0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
        80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
         100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }

    .preloader {
        width: 70px;
        height: 70px;
        border: 10px solid #eee;
        border-top: 10px solid #666;
        border-radius: 50%;
        animation-name: girar;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      @keyframes girar {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }


      .loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  margin: 8em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.loader:before {
  left: -3.5em;
}
.loader:after {
  left: 3.5em;
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #333333;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ccc;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #333333;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ccc;
  }
}