Όμορφα Loaders για blog/site


Καλημέρα σε όλους τους μπλόγκερ και μη. Κάτι που έλειπε από το blog είναι μερική Loaders, μπορείτε να τους εφαρμόσετε σε blog και σε διαφορα site αυτό που πρέπει να κάνετε είναι αντιγραφή επικόλληση τον παρακάτω κώδικα που σας αρέσει. 
Πάμε να δούμε μερικούς 





<style> /* foulscode.blogspot.gr */
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
@keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-o-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-ms-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-moz-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-webkit-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
#loader{
width:85px;
  height:55px;
margin:100px auto;
}
.bar{
float:left;
margin:0px 2px;
width:10px;
height:50px;
background:#7bf;
border-top:3px solid #7af;
border-bottom:3px solid #7af;
/*border-radius*/
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
}
.bar:nth-child(1){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
}
.bar:nth-child(2){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.2s;
   -moz-animation-delay:.2s;
    -ms-animation-delay:.2s;
     -o-animation-delay:.2s;
        animation-delay:.2s;
}
.bar:nth-child(3){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.4s;
   -moz-animation-delay:.4s;
    -ms-animation-delay:.4s;
     -o-animation-delay:.4s;
        animation-delay:.4s;
}
.bar:nth-child(4){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.6s;
   -moz-animation-delay:.6s;
    -ms-animation-delay:.6s;
     -o-animation-delay:.6s;
        animation-delay:.6s;
}
.bar:nth-child(5){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.8s;
   -moz-animation-delay:.8s;
    -ms-animation-delay:.8s;
     -o-animation-delay:.8s;
        animation-delay:.8s;
}
.bar:nth-child(6){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
p {
  text-align:center;
  font-size:30px;
  font-family:helvetica neue;
  font-weight:100;
}
a {
  color:#7bf;
  text-decoration:none;
}
/* foulscode.blogspot.gr */
</style>
<div id="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div><br>
<p>Waiting for followers <a href="http://twitter.com/foulscode">here <span class="entypo-twitter-circled"></span></a></p>


LIVE DEMO



windows8

<style>
/* foulscode.blogspot.gr */.windows8 {
position: relative;
width: 90px;
height:90px;
}
.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 4.95s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 4.95s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 4.95s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 4.95s infinite;
transform: rotate(225deg);
animation: orbit 4.95s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #FFA200;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-o-border-radius: 11px;
-ms-border-radius: 11px;
border-radius: 11px;
}
.windows8 #wBall_1 {
-moz-animation-delay: 1.08s;
-webkit-animation-delay: 1.08s;
-o-animation-delay: 1.08s;
-ms-animation-delay: 1.08s;
animation-delay: 1.08s;
}
.windows8 #wBall_2 {
-moz-animation-delay: 0.22s;
-webkit-animation-delay: 0.22s;
-o-animation-delay: 0.22s;
-ms-animation-delay: 0.22s;
animation-delay: 0.22s;
}
.windows8 #wBall_3 {
-moz-animation-delay: 0.43s;
-webkit-animation-delay: 0.43s;
-o-animation-delay: 0.43s;
-ms-animation-delay: 0.43s;
animation-delay: 0.43s;
}
.windows8 #wBall_4 {
-moz-animation-delay: 0.65s;
-webkit-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
-ms-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.windows8 #wBall_5 {
-moz-animation-delay: 0.86s;
-webkit-animation-delay: 0.86s;
-o-animation-delay: 0.86s;
-ms-animation-delay: 0.86s;
animation-delay: 0.86s;
}
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}
30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}
76% {
opacity: 0;
-moz-transform:rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
/* foulscode.blogspot.gr */</style>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>



spinningSquaresG
<style>
/* foulscode.blogspot.gr */
#spinningSquaresG{
position:relative;
width:240px;
height:29px}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FF5900;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-o-animation-delay:0.36s;
-ms-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
animation-delay:0.45s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-o-animation-delay:0.54s;
-ms-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-o-animation-delay:0.63s;
-ms-animation-delay:0.63s;
animation-delay:0.63s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-o-animation-delay:0.72s;
-ms-animation-delay:0.72s;
animation-delay:0.72s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.81s;
-webkit-animation-delay:0.81s;
-o-animation-delay:0.81s;
-ms-animation-delay:0.81s;
animation-delay:0.81s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
animation-delay:0.9s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-o-animation-delay:0.99s;
-ms-animation-delay:0.99s;
animation-delay:0.99s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FF5900;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FF5900;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FF5900;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FF5900;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FF5900;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
/* foulscode.blogspot.gr */
</style>
<div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>



facebookG




<style>
/* foulscode.blogspot.gr */
#facebookG{
width:128px}
.facebook_blockG{
background-color:#FFFFFF;
border:3px solid #FF5900;
float:left;
height:91px;
margin-left:7px;
width:24px;
opacity:0.1;
-moz-animation-name:bounceG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(0.7);
-webkit-animation-name:bounceG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(0.7);
-o-animation-name:bounceG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(0.7);
-ms-animation-name:bounceG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(0.7);
animation-name:bounceG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(0.7);
}
#blockG_1{
-moz-animation-delay:0.27s;
-webkit-animation-delay:0.27s;
-o-animation-delay:0.27s;
-ms-animation-delay:0.27s;
animation-delay:0.27s;
}
#blockG_2{
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-o-animation-delay:0.36s;
-ms-animation-delay:0.36s;
animation-delay:0.36s;
}
#blockG_3{
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
animation-delay:0.45s;
}
@-moz-keyframes bounceG{
0%{
-moz-transform:scale(1.2);
opacity:1}
100%{
-moz-transform:scale(0.7);
opacity:0.1}
}
@-webkit-keyframes bounceG{
0%{
-webkit-transform:scale(1.2);
opacity:1}
100%{
-webkit-transform:scale(0.7);
opacity:0.1}
}
@-o-keyframes bounceG{
0%{
-o-transform:scale(1.2);
opacity:1}
100%{
-o-transform:scale(0.7);
opacity:0.1}
}
@-ms-keyframes bounceG{
0%{
-ms-transform:scale(1.2);
opacity:1}
100%{
-ms-transform:scale(0.7);
opacity:0.1}
}
@keyframes bounceG{
0%{
transform:scale(1.2);
opacity:1}
100%{
transform:scale(0.7);
opacity:0.1}
}
/* foulscode.blogspot.gr */
</style>
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG">
</div>
<div id="blockG_2" class="facebook_blockG">
</div>
<div id="blockG_3" class="facebook_blockG">
</div>
</div> 


Αποθήκευση και αυτό ήταν.


Αν θέλετε ένα από τα παραπάνω σε διαφορετικό χρώμα το μονο που πρέπει να κάνετε είναι να αφήσετε το σχολειό σας.


Σχόλια