Home CSS 8 CSS Loader Terunik Membuat Animasi Loading

07 July 2023

8 CSS Loader Terunik Membuat Animasi Loading

Komentar
بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

8 CSS Loader Terunik Membuat Animasi Loading

CSS LOADER Seringkah kalian melihat animasi loader pada blog. Biasanya ada beberapa blogger yang memasang trik ini. Jadi ketika kalian membuka blog, langsung muncul animasi loading blog. Pernah khan kalian melihatnya? kalau pernah ya itulah yang dinamakan animasi loading blog.

Tapi sekarang kita akan membuat animasinya saja, tidak terkait dengan loading awal blognya. Soalnya dari beberapa cara yang saya praktekan, semuanya sudah tidak dapat berfungsi normal. Dari sekian CSS dan Js yang saya coba untuk memunculkan animasi loading blog, kesemuanya sudah tidak dapat tampil. Entah itu scriptnya yang error, tidak relevan dengan teknologi sekarang, atau mungkin dari pihak blogspot sudah mematikan fitur ini? entahlah tapi yang jelas sudah tidak bisa.

Dari beberapa macam trik, mungkin ini yang agak lumayan gokil nih. Menampilkan animasi loader sekaligus dalam sebuah tampilan blog. Ada 8 macam animasi loading yang akan ditampilkan dalam tutorial kali ini. Sekaligus langsung saja penerapannya dengan teknik CSS. Mungkin kalian bertanya, bagaimana ya menerapkannya. Tenang saja, karena saya akan memberikan tutorial secara gampangnya, kalian tinggal copy paste saja nanti. Lanjut lagi ya?

Mungkin loader yang dulu pernah tampil adalah menggunakan animasi gif ya teman-teman. Sampai sekarang pun animasi gif juga masih rame dan banyak juga yang menggunakannya. Tapi sekarang kita tidak menggunakannya, apalah juga nanti tidak menggunakan aplikasi pengolah gif seperti gifmaker tapi kita murni menggunakan CSS sebagai dasarnya. Selain lebih ringan, juga lebih keren penerapannya nanti. Ehm, okelah kalau begitu, langsung saja kita mulai tutorialnya.

Baca Juga :



8 Trik CSS Loader Terunik Membuat Animasi Loading


Caranya seperti ini :
1. Masuk ke DASHBOARD Blogger
2. Klik TEMA
3. Pilih SESUAIKAN kemudian pilih EDIT HTML
4. Temukan kode ]]></b:skin>
5. Tempelkan kode dibawah persis diatas kode ]]></b:skin> tadi. Letaknya di tengah dari struktur template blog ya teman-teman. Supaya gampang, langsung scroll kebawah saja templatenya.
html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
a{
  text-decoration: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-of-type {
  margin-left: 0;
}
.container{
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
/* CLEARFIX */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.row{
  margin: 30px 0;
}
.three{
  background-color: #eee;
  padding: 50px 0;
}
/* ALL LOADERS */
.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}
/* LOADER 1 */
#loader-1:before, #loader-1:after{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #3498db;
}
#loader-1:before{
  z-index: 100;
  animation: spin 1s infinite;
}
#loader-1:after{
  border: 10px solid #ccc;
}
@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* LOADER 2 */
#loader-2 span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
}
#loader-2 span:nth-child(1){
  animation: bounce 1s ease-in-out infinite;
}
#loader-2 span:nth-child(2){
  animation: bounce 1s ease-in-out 0.33s infinite;
}
#loader-2 span:nth-child(3){
  animation: bounce 1s ease-in-out 0.66s infinite;
}
@keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  25%{
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
/* LOADER 3 */
#loader-3:before, #loader-3:after{
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  background-color: #3498db;
  animation: squaremove 1s ease-in-out infinite;
}
#loader-3:after{
  bottom: 0;
  animation-delay: 0.5s;
}
@keyframes squaremove{
  0%, 100%{
    -webkit-transform: translate(0,0) rotate(0);
    -ms-transform: translate(0,0) rotate(0);
    -o-transform: translate(0,0) rotate(0);
    transform: translate(0,0) rotate(0);
  }
  25%{
    -webkit-transform: translate(40px,40px) rotate(45deg);
    -ms-transform: translate(40px,40px) rotate(45deg);
    -o-transform: translate(40px,40px) rotate(45deg);
    transform: translate(40px,40px) rotate(45deg);
  }
  50%{
    -webkit-transform: translate(0px,80px) rotate(0deg);
    -ms-transform: translate(0px,80px) rotate(0deg);
    -o-transform: translate(0px,80px) rotate(0deg);
    transform: translate(0px,80px) rotate(0deg);
  }
  75%{
    -webkit-transform: translate(-40px,40px) rotate(45deg);
    -ms-transform: translate(-40px,40px) rotate(45deg);
    -o-transform: translate(-40px,40px) rotate(45deg);
    transform: translate(-40px,40px) rotate(45deg);
  }
}
/* LOADER 4 */
#loader-4 span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
  opacity: 0;
}
#loader-4 span:nth-child(1){
  animation: opacitychange 1s ease-in-out infinite;
}
#loader-4 span:nth-child(2){
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}
#loader-4 span:nth-child(3){
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}
@keyframes opacitychange{
  0%, 100%{
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
}
/* LOADER 5 */
#loader-5 span{
  display: block;
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 20px;
  height: 20px;
  background-color: #3498db;
}
#loader-5 span:nth-child(2){
  animation: moveanimation1 1s ease-in-out infinite;
}
#loader-5 span:nth-child(3){
  animation: moveanimation2 1s ease-in-out infinite;
}
#loader-5 span:nth-child(4){
  animation: moveanimation3 1s ease-in-out infinite;
}
@keyframes moveanimation1{
  0%, 100%{
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
  }
  75%{
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes moveanimation2{
  0%, 100%{
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  75%{
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
}
@keyframes moveanimation3{
  0%, 100%{
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  75%{
    -webkit-transform: translate(30px, 30px);
    -ms-transform: translate(30px, 30px);
    -o-transform: translate(30px, 30px);
    transform: translate(30px, 30px);
  }
}
/* LOADER 6 */
#loader-6{
  top: 40px;
  left: -2.5px;
}
#loader-6 span{
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #3498db;
}
#loader-6 span:nth-child(1){
  animation: grow 1s ease-in-out infinite;
}
#loader-6 span:nth-child(2){
  animation: grow 1s ease-in-out 0.15s infinite;
}
#loader-6 span:nth-child(3){
  animation: grow 1s ease-in-out 0.30s infinite;
}
#loader-6 span:nth-child(4){
  animation: grow 1s ease-in-out 0.45s infinite;
}
@keyframes grow{
  0%, 100%{
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
  }
  50%{
    -webkit-transform: scaleY(1.8);
    -ms-transform: scaleY(1.8);
    -o-transform: scaleY(1.8);
    transform: scaleY(1.8);
  }
}
/* LOADER 7 */
#loader-7{
  -webkit-perspective: 120px;
  -moz-perspective: 120px;
  -ms-perspective: 120px;
  perspective: 120px;
}
#loader-7:before{
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: flip 1s infinite;
}
@keyframes flip {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg)  rotateX(180deg);
  }
}
/* LOADER 8 */
#loader-8:before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 10px);
  left: 0px;
  background-color: #3498db;
  animation: rotatemove 1s infinite;
}
@keyframes rotatemove{
  0%{
    -webkit-transform: scale(1) translateX(0px);
    -ms-transform: scale(1) translateX(0px);
    -o-transform: scale(1) translateX(0px);
    transform: scale(1) translateX(0px);
  }
  100%{
    -webkit-transform: scale(2) translateX(45px);
    -ms-transform: scale(2) translateX(45px);
    -o-transform: scale(2) translateX(45px);
    transform: scale(2) translateX(45px);
  }
}


Setelah utak-atik template guna menempelkan CSS-nya, sekarang saatnya menuju ke HTML. Siapkan saja dan taruh di halaman Tata Letak, Tambah Halaman HTML/Javascript. Dan SIMPAN.

<div class="container">
    <h1>CSS Loaders</h1>
    <div class="row cf">
      <div class="three col">
        <div class="loader" id="loader-1"></div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-2">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-3"></div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-4">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    <div class="row cf">
      <div class="three col">
        <div class="loader" id="loader-5">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-6">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-7"></div>
      </div>
      <div class="three col">
        <div class="loader" id="loader-8"></div>
      </div>
    </div>
    <h1>www.alifacode.com</h1>
  </div>


Nah sudah khan teman-teman, itu triknya sudah muncul di blog Demo. Saya sertakan supaya kalian bisa melihat demonya seperti apa setelah dipraktekkan nanti. Ya jadinya kira-kira seperti ini. Dibawah di Demo coba diklik saja.



Sekarang kalian praktekkan tutorial cara memasang CSS Loader yang sudah saya buat diatas. Pastikan back up dulu template kalian kalau mau utak-atik template. Sehingga ketika ada kerusakan template atau galat, template bisa dikembalikan seperti semula. Jangan asal utak-atik template ya, soale kalau udah rusak, susah benerinnya. Dan kalau nggak bener, ntar kena penalty google karena error dan susah keindex search engine khan jadi berabe ya :D. "Janganlah kamu bersikap lemah, dan janganlah (pula) kamu bersedih hati, padahal kamulah orang-orang yang paling tinggi (derajatnya), jika kamu orang-orang yang beriman." - Quran Surat Ali 'Imran : 139. Tetap semangat kawan. Salam Blogger.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul 8 CSS Loader Terunik Membuat Animasi Loading . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )