Expose

5By2.tk

<html>
<head>
<style>

body,html {
width:100%;
height:100%;
background:#4c7a9e ;
}
@-webkit-keyframes color{
0%{color:#fff;}
  50%{color:transparent;}
  100%{color:#fff;}
}
@-webkit-keyframes border-c{
0%{border-color:transparent;border-top-color:#fff;}
  25%{border-color:transparent;border-right-color:#fff;}
  50%{border-color:transparent;border-bottom-color:#fff;}
  75%{border-color:transparent;border-left-color:#fff;}
  100%{border-color:transparent;border-top-color:#fff;}
}
#loader{
font-family:"helvetica neue";
text-align:center;
width:100px;
height:100px;
line-height:100px;
border:1px solid transparent;
-webkit-border-radius:100px;
   -moz-border-radius:100px;
        border-radius:100px;
display:block;
margin:120px auto;
padding:10px;
color:#fff;
font-weight:100;
-webkit-animation:border-c 1.25s linear 0 infinite;
   -moz-animation:border-c 1.25s linear 0 infinite;
    -ms-animation:border-c 1.25s linear 0 infinite;
     -o-animation:border-c 1.25s linear 0 infinite;
        animation:border-c 1.25s linear 0 infinite;
}
#loader span{
-webkit-animation:color 1.5s linear infinite;
   -moz-animation:color 1.5s linear infinite;
    -ms-animation:color 1.5s linear infinite;
     -o-animation:color 1.5s linear infinite;
        animation:color 1.5s linear infinite;
}
#loader span:nth-child(1){
-webkit-animation-delay:0s;
   -moz-animation-delay:0s;
    -ms-animation-delay:0s;
     -o-animation-delay:0s;
        animation-delay:0s;
}
#loader span:nth-child(2){
-webkit-animation-delay:.25s;
   -moz-animation-delay:.25s;
    -ms-animation-delay:.25s;
     -o-animation-delay:.25s;
        animation-delay:.25s;
}
#loader span:nth-child(3){
-webkit-animation-delay:.45s;
   -moz-animation-delay:.45s;
    -ms-animation-delay:.45s;
     -o-animation-delay:.45s;
        animation-delay:.45s;
}
#loader span:nth-child(4){
-webkit-animation-delay:.55s;
   -moz-animation-delay:.55s;
    -ms-animation-delay:.55s;
     -o-animation-delay:.55s;
        animation-delay:.55s;
}
#loader span:nth-child(5){
-webkit-animation-delay:.65s;
   -moz-animation-delay:.65s;
    -ms-animation-delay:.65s;
     -o-animation-delay:.65s;
        animation-delay:.65s;
}
#loader span:nth-child(6){
-webkit-animation-delay:.75s;
   -moz-animation-delay:.75s;
    -ms-animation-delay:.75s;
     -o-animation-delay:.75s;
        animation-delay:.75s;
}
#loader span:nth-child(7){
-webkit-animation-delay:.85s;
   -moz-animation-delay:.85s;
    -ms-animation-delay:.85s;
     -o-animation-delay:.85s;
        animation-delay:.85s;
}
p{
text-align:center;
font-size:30px;
font-family:helvetica neue;
font-weight:100;
color:#fff;
}
a{
color:#7bf;
text-decoration:none;
}

</style>
</head>
<body>
<div id="loader">
    <span>L</span>
    <span>O</span>
    <span>A</span>
    <span>D</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
</div>

</html>




<html>
<head>
<style>
.loader {
    text-align: center;    
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}
</style>
</head>
<body>
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>



<html>
<style>
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>
<body>
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</body>
</html>

<html>
<style>
.spinner {
  margin: 100px auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #333;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
</style>
<body>
<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>
</body>
</html>


<html>
<style>
.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #333;
  border-radius: 100%;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

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

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
</style>
<body>
<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</body>
</html>
© Copyright 2015 5 By 2 - An Associated With XMORI   
Back to Top