Senin, 21 Desember 2015

Kode CSS Loader Bentuk Kotak - Metal Gear Solid

Author - GlobalAccess Date - Senin, Desember 21, 2015 Blogger CSS

Keterangan Kode CSS Loader Bentuk Kotak - Metal Gear Solid :

Kode CSS loader ini menampilkan tampilan Loading Flat berbentuk Kotak sebanyak 4 buah, ringan dan sederhana namun mampu terlihat sangat keren. Bisa digunakan untuk loading halaman blog anda supaya jadi lebih menarik.

Kode CSS Loader Bentuk Kotak - Metal Gear Solid diupload pada Senin, Desember 21, 2015 oleh GlobalAccess di EBOOK GRATIS dengan tujuan sebagai bahan bacaan, materi pembelajaran, menambah ilmu atau untuk dijadikan salah satu referensi sesuai kebutuhan anda.

Cara Download : Klik Link di bawah, dilanjutkan mengklik gambar pada halaman download berikutnya.

Sebelum menggunakan CSS ini, silahkan lihat Demo Tampilannya melalui tombol Demo supaya lebih jelas.

DEMO

HTML
<div class="loader">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #323232;
}

.loader {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
}

.box {
  width: 45%;
  height: 45%;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  -webkit-filter: blur(1px);
  animation: load 1s linear infinite;
}
.box:nth-of-type(1) {
  position: absolute;
  top: 2.5%;
  left: 2.5%;
}
.box:nth-of-type(2) {
  position: absolute;
  top: 2.5%;
  right: 2.5%;
  animation-delay: -0.25s;
}
.box:nth-of-type(3) {
  position: absolute;
  bottom: 2.5%;
  right: 2.5%;
  animation-delay: -0.5s;
}
.box:nth-of-type(4) {
  position: absolute;
  bottom: 2.5%;
  left: 2.5%;
  animation-delay: -0.75s;
}

@keyframes load {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}