Memuat Halaman
"Membuat Animasi Loading Dengan CSS3"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Membuat Animasi Loading Dengan CSS3

Tutorial kali ini adalah cara membuat animasi loading menggunakan CSS3. Perlu untuk diketahui bahwa tutorial ini murni menggunakan CSS3 tanpa melibatkan javascript, jQuery dan juga kita tidak perlu load gambar karena di sini kita hanya menggunakan trik animation yang terdapat di CSS3.

Tutorial Animasi loading ini ada 2 jenis, yang pertama adalah Animasi Loading Bar dan Animasi Loading Spin atau animasi loading memutar.

Berikut tutorial dalam animasi loading.

Demo Animasi Loading Bar

CSS3 Animasi Loading Bar

.abLoad{
 margin:0 auto;
 width: 67px;
 height: 35px;
}

.abLoadingBar {
 background-color:#007ACC;  
 background-image: -moz-linear-gradient(45deg, #007ACC 25%, #BFE4FD); 
 background-image: -webkit-linear-gradient(45deg, #007ACC 25%, #BFE4FD);
 border-left:1px solid #007ACC; border-top:1px solid #229cee; border-right:1px solid #007ACC; border-bottom:1px solid #229cee; 
 width:2px;
 height:10px;
 float:left;
 margin-left:5px;
        opacity:0.1;
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -moz-animation:abLoading 1s infinite linear;
 -webkit-animation:abLoading 1s infinite linear;
}
#abBlock_1{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
 }
#abBlock_2{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_3{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_4{
  -moz-animation-delay: .3s;
 -webkit-animation-delay: .3s;
}
#abBlock_5{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_6{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_7{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
}
@-moz-keyframes abLoading{
 0%{-moz-transform: scale(1.3);opacity:1;}
 100%{-moz-transform: scale(0.7);opacity:0;}
}
@-webkit-keyframes abLoading{
 0%{-webkit-transform: scale(1.3);opacity:1;}
 100%{-webkit-transform: scale(0.7);opacity:0;}
}

HTML Animasi Loading Bar

<div class="abLoad"><div id="abBlock_1" class="abLoadingBar"></div>
<div id="abBlock_2" class="abLoadingBar"></div>
<div id="abBlock_3" class="abLoadingBar"></div>
<div id="abBlock_4" class="abLoadingBar"></div>
<div id="abBlock_5" class="abLoadingBar"></div>
<div id="abBlock_6" class="abLoadingBar"></div>
<div id="abBlock_7" class="abLoadingBar"></div></div>

Demo Animasi Loading Spin

CSS3 Animasi Loading Spin

.circle {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-right:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 margin:0 auto;
 -moz-animation:spinPulse 1s infinite ease-in-out;
 -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-left:5px solid rgba(0,0,0,0);
 border-right:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7; 
 width:30px;
 height:30px;
 margin:0 auto;
 position:relative;
 top:-50px;
 -moz-animation:spinoffPulse 1s infinite linear;
 -webkit-animation:spinoffPulse 1s infinite linear;
 text-align: center;
 font-family: Segoe UI;
 font-size: 24px;
 font-weight: bolder;
 color: rgba(0, 183, 229, 0.9);
}
@-moz-keyframes spinPulse {
 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
 50% { -moz-transform:rotate(145deg); opacity:1; }
 100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
 50% { -webkit-transform:rotate(145deg); opacity:1;}
 100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}

HTML Animasi Loading Spin

<div class="circle"></div>
<div class="circle1"></div>

Selamat belajar dan selamat mencoba trik Animation dari CSS3.

Jika anda ingin memasang animasi loading seperti di atas ke dalam blog anda, silahkan baca tutorialnya di sini --> Memasang Animasi Loading untuk Blogspot

Gabung ke group:

Artikel Terkait

13 Respon Komentar

MUXLIMO, said...
June 3, 2012 at 9:07 AM

Keren ni, Mas.. :w:
Kadang-kadang suka ngelamun.. kok bisa ya rangkaian kode itu berubah jadi animasi dan gambar2 yang menarik.. *gak kesampaian ma sel-sel kelabu ane :3: :14:

June 4, 2012 at 6:32 AM

@MUXLIMO memang kalo yang di bayangin tu bikin qt sndiri yg ribet mas..
Dengan informasi sekarang yg semakin maju, segala sesuatu yg tidak mungkin bisa saja menjadi mungkin...

*(Komentar sebelumnya d hapus cz kagak nyambung) :e::d:

June 17, 2012 at 4:32 PM

Kode tersebut Tarok dimana Gan...

June 19, 2012 at 1:33 AM

@Aan Noveri Pardika tu kode dikembangin gan..
ane cuma share tutorial doank..
selmat belajar... :e:

June 23, 2012 at 12:29 AM

Aduh Gan...
Pusing Wa kembangkan,..

Lagian saya Baru Belajar Blog ne gan,.. mohon klo ada Versi baru belajar CSS3
"Membuat Animasi Loading Dengan CSS3 " Biar saya ngerti tetang CSS3 nya.

June 23, 2012 at 4:41 AM

@Aan Noveri Pardika ok gan siap...
berlangganan aja gan biar agan g ketinggalan info tentang CSS3.. :e:

MUXLIMO, said...
June 23, 2012 at 8:38 AM

Pengen pake yang loading spin, Mas.. tapi gimana caranya supaya bisa ditambahin teks kayak punya si Agan di sinih.. bagi dong resepnyaa.. :j: :e:

June 23, 2012 at 12:11 PM

@MUXLIMO ada rencana mw bkin tutorial'a mas mux..
pesan d facebook jg bnyak yg request tp ane msih ujian akhir kmrin...
jd g sempat... :e:

MUXLIMO, said...
June 23, 2012 at 4:55 PM

@Aditya Meilaz Rahmanto

hoho, Mantap! udah jadi ya tutorialnya. Makasih Mas Bro! :w:

June 23, 2012 at 5:45 PM

Woke Gan.. Di tuggu info nya

June 23, 2012 at 9:50 PM

@Aan Noveri Pardika Ane dh bikin tutorialnya gan, silahkan cek link di atas... :e:

Donstera, said...
August 4, 2012 at 4:06 PM

Wah ini menggunakan CSS + @keyframes

Orang Pinggiran, said...
November 8, 2012 at 2:41 PM

:d: wuuuhh mantep boos blognya.. oyah yang mau tau Tutorial edit photo dengan gimp atau ilmu Linux Ubuntu silahkan kunjungi Blogku
rulionly.blogspot.com

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?