کدهای جذاب و دیدنی ( little box-shadow animation ) : ساخت لودر با استفاده از سایه

body {

  padding:0;

  margin:0;

  background:#52534F;

}

.load {

  width:15px;

  height:15px;

  background:rgba(0,0,0,0);

  border-radius:50%;

  margin:100px auto;

  -webkit-animation:load 3s ease-in-out infinite;

          animation:load 3s ease-in-out infinite;

}

@-webkit-keyframes load {

  0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

  33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

  42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #fff;}

  50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

  83% {box-shadow:15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

  92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #fff;}

  100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

}

@keyframes load {

  0% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  8% {box-shadow:15px -15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  17% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

  25% {box-shadow:15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

  33% {box-shadow:-15px -15px 0 0 #fff, 15px 15px 0 0 #fff, -15px 15px 0 0 #fff;}

  42% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, -15px 15px 0 0 #fff;}

  50% {box-shadow:-15px -15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  58% {box-shadow:-15px 15px 0 0 #fff, 15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  67% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px 15px 0 0 #fff;}

  75% {box-shadow:-15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

  83% {box-shadow:15px 15px 0 0 #fff, -15px -15px 0 0 #fff, 15px -15px 0 0 #fff;}

  92% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, 15px -15px 0 0 #fff;}

  100% {box-shadow:15px 15px 0 0 #fff, -15px 15px 0 0 #fff, -15px -15px 0 0 #fff;}

}