Cara Memasang Efek Animasi Keren Pada Loading Blog Di Blogger (Responsive+Ringan)

Cara Memasang Efek Animasi Keren Pada Loading Blog Di Blogger (Responsive+Ringan)

Paling-Top21 – Sebagai seorang pemilik blog tentunya kita harus paham betul mengenai faktor-faktor dari kenyamanan pengunjung blog kita. Karena pada dasarnya, pengunjung akan lebih senang membaca artikel dari suatu blog yang mampu memberikan nuansa yang menarik kepada setiap pengunjungnya.

Ada banyak hal yang menjadi faktor pendorong mengapa pengunjung merasa nyaman berada di blog kita, seperti tampilan blog, isi konten yang menarik, fitur yang mudah digunakan dan sebagainya.

Nah dari kesemua faktor diatas, kali ini saya hanya akan membahas faktor pendorong interaksi pengunjung terhadap loading suatu blog saja.

Ketika pengunjung ingin membaca atau beralih dari satu halaman kehalaman lainnya, tentunya mereka akan menjumpai yang namanya loading, atau batas waktu tunggu.

Nah, proses loading inilah yang kadang kala sering diabaikan oleh kebanyakan pemilik situs blog, padahal secara tidak langsung para pengunjung akan merasa sungkan untuk membaca artikel lainnya apabila proses loading ini membutuhkan waktu yang lama.

Mungkin, proses loading blog yang lambat bisa diatasi dengan mudah, anda bisa mempercepat proses loading ini dengan menyewa jasa para praktisi dengan membayar sejumlah nominal tertentu.

Tapi, mungkin juga anda tidak punya uang untuk membayar jasa mereka. Nah untuk itu anda bisa menggunakan efek animasi bergerak pada loading blog.

Dengan menerapkan efek bergerak ini tentunya, para pengunjung akan lebih tertarik untuk menikmati tampilan efek animasi ini selama beberapa saat, hingga proses loading selesai.

Penggunaan efek animasi ini tertentunya akan membuat pengunjung bertahan beberapa saat hingga proses loading selesai, sehingga pengunjung tidak merasa bosan atau bahkan menutup situs blog kita.

Selain itu pengunjung juga tidak akan sadar dengan lambatnya proses loading, sebab proses loading ini telah disisipi efek animasi keren.

Satu lagi, efek animasi ini juga tidak akan memberatkan loading suatu blog. Jadi suatu misal kecepatan loading blog anda berkisar antara 80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}-85{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}, maka jika anda memasang efek animasi ini kedalam blog anda, kecepatan loadingnya akan tetap sama.

Hal ini karena script kode dari efek animasi ini tidak menggunakan animasi bergambar yang berat seperti pada umumnya, seluruh kode atau script dalam pemasangan efek animasi loading blog ini murni menggunakan CSS dan SVG tanpa disertai gambar, jadi bisa dipastikan akan sangat ringan bila digunakan.

Nah untuk anda yang ingin segera memasang efek animasi bergerak ini kedalam situs blognya, bisa langsung mengikuti panduan dibawah ini:

1. Buka situs Blogger.com>>Tema>>Edit HTML
2. Kemudian pasang kode jQuery library versi 1.7.1 ini dibawah kode template blog anda:


3. Pasang juga kode jQuery berikut ini sebelum kode


//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>

4. Disusul pula dengan meletakkan kode berikut tepat dibawah kode atau setelah

HTML





5. Terakhir, letakkan kode CSS berikut ini sebelum


CSS

/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px);left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke:#4285F4}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke:#DE3E35}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke:#F7C223}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke:#1B9A59}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke:#4285F4}}
@keyframes dash{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke-dashoffset:187}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke-dashoffset:46.75;transform:rotate(135deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{stroke-dashoffset:187;transform:rotate(450deg)}}

6. Simpan Tema, maka hasilnya akan seperti ini:

Selain itu, masih ada banyak varian efek animasi loading yang bisa anda gunakan pada blog anda, jadi silahkan pilih dan sesuaikan saja efek animasi yang ada dengan situs blog anda.

Untuk memasang efek animasi ini, anda hanya perlu mengganti kode HTML dan CSS pada langkah nomor 4 dan 5 dengan kode HTML dan CCS pada efek animasi berikut ini:

Efek Animasi Loading: 

Bounce Dot

HTML








CSS


/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
#dot{background:#FFF;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1,.7)}20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(.7,1.2)}40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1,1)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{bottom:100px}46{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1,1)}80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(.7,1.2)}90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(.7,1.2)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:0;top:0;right:0}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:1}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}

Efek Animasi Loading: 

Pacman

HTML















CSS


/* Preloader */
#preloader{overflow:hidden;background:#1C163A;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078})}
.loader{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};height:60px;width:160px;margin:0;-webkit-transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078});transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078})}
.circles{position:absolute;left:-5px;top:0;height:60px;width:180px}
.circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:#EFEFEF}
.circles span.one{right:80px}
.circles span.two{right:40px}
.circles span.three{right:0}
.circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear}
@keyframes animcircles{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(0px,0px)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-40px,0px)}}
.pacman{position:absolute;left:0;top:0;height:60px;width:60px}
.pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A}
.pacman span{position:absolute;top:0;left:0;height:60px;width:60px}
.pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:#FFFB16}
.pacman .top::before{top:0;border-radius:60px 60px 0 0}
.pacman .bottom::before{bottom:0;border-radius:0 0 60px 60px}
.pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0 0 60px}
.pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite}
@keyframes animtop{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(-45deg)}}
.pacman .bottom{animation:animbottom 0.5s infinite}
@keyframes animbottom{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(45deg)}}
Efek Animasi Loading: 

Square

HTML










CSS


/* Preloader */
#preloader{overflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078});}
.loader{height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};width:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
.loader .l_main{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};width:172px;height:128px;margin:0;-webkit-transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078});transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078})}
@media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}}
@media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}}
.l_square{position:relative}
.l_square:nth-child(1){margin-left:0px}
.l_square:nth-child(2){margin-left:44px}
.l_square:nth-child(3){margin-left:88px}
.l_square:nth-child(4){margin-left:132px}
.l_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF}
.l_square span:nth-child(1){top:0px}
.l_square span:nth-child(2){top:44px}
.l_square span:nth-child(3){top:88px}
.l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in}
.l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in}
.l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in}
.l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in}
.l_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s}
.l_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s}
.l_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s}
@keyframes animsquare1{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},95{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(0px,0px) rotate(0deg)}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},70{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare2{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(0px,0px) rotate(0deg)}35{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},65{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare3{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},15{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},85{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(0px,0px) rotate(0deg)}40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare4{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(0px,0px) rotate(0deg)}45{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},55{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-40px,0px) rotate(-90deg)}}
Efek Animasi Loading: 

Running Dot

HTML









CSS


/* Preloader */
#preloader{overflow:hidden;background:#55efc4;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{width:100px;height:40px;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:-20px -50px}
#loader div{width:10px;height:10px;background:#FFF;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};position:absolute}
#d1{animation:animate 2s linear infinite}
#d2{animation:animate 2s linear infinite -.4s}
#d3{animation:animate 2s linear infinite -.8s}
#d4{animation:animate 2s linear infinite -1.2s}
#d5{animation:animate 2s linear infinite -1.6s}
@-webkit-keyframes animate{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:100px;top:0}80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0;top:0}85{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0;top:-10px;width:10px;height:10px}90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:20px;height:15px}95{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:100px;top:-10px;width:10px;height:10px}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:100px;top:0}}
Efek Animasi Loading: 

Circle

HTML







CSS


/* Preloader */
#preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 32px);left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 32px);width:64px;height:64px;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};perspective:800px}
.inner{position:absolute;box-sizing:border-box;width:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
.inner.one{left:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};top:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA}
.inner.two{right:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};top:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA}
.inner.three{right:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};bottom:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA}
@keyframes rotate-one{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}
@keyframes rotate-two{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}
@keyframes rotate-three{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
Efek Animasi Loading: 

Reversed Dot

HTML









CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078});}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{height:0;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(0.5);background:#2b8ccd}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1);background:#fff}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(0.5);background:#2b8ccd}}
Efek Animasi Loading:

Jelly Box

HTML






CSS


/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px);left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px)}
@keyframes loader{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-100px}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:110{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}}
#box{width:50px;height:50px;background:#fff;animation:animate .5s linear infinite;position:absolute;top:0;left:0;border-radius:3px}
@keyframes animate{17{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{border-bottom-right-radius:3px}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateY(9px) rotate(22.5deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateY(9px) rotate(67.5deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateY(0) rotate(90deg)}}
#shadow{width:50px;height:5px;background:#000;opacity:0.1;position:absolute;top:59px;left:0;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:shadow .5s linear infinite}
@keyframes shadow{50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1.2,1)}}
Efek Animasi Loading: 

Hourglass

HTML







CSS


/* Preloader */
#preloader{overflow:hidden;background:#DB7769;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{animation:loader 5s cubic-bezier(.8,0,.2,1) infinite;height:40px;width:41px;position:absolute;top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px);left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 20px)}
@keyframes loader{90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(180deg)}}
#top{animation:top 5s linear infinite;border-top:20px solid #fff;border-right:20px solid transparent;border-left:20px solid transparent;height:0;width:1px;transform-origin:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} 100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
@keyframes top{90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(0)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(0)}}
#bottom{animation:bottom 5s linear infinite;border-right:20px solid transparent;border-bottom:20px solid #fff;border-left:20px solid transparent;height:0;width:1px;transform:scale(0);transform-origin:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} 100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
@keyframes bottom{10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(0)}90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scale(1)}}
#line{animation:line 5s linear infinite;border-left:1px dotted #fff;height:0;width:0;position:absolute;top:20px;left:20px}
@keyframes line{10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:20px}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:20px}}
Efek Animasi Loading:

Spring Line

HTML





CSS


/* Preloader */
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 17px);left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 35px)}
#loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}
@keyframes rotate{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{border-width:10px}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{border-width:3px}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(115deg);border-width:10px}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{border-width:3px}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{border-width:10px}}
Efek Animasi Loading: 

Square Loader

HTML





CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078})}
.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #0984e3;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};background-color:#0984e3;animation:loader-inner 2s infinite ease-in}
@keyframes loader{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(180deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(180deg)}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(360deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(360deg)}}
@keyframes loader-inner{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{height:0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}}
Efek Animasi Loading: 

Tech Loader

HTML







CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};width:200px;height:200px;margin-top:-100px;margin-left:-100px}
.loader > .dot{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:dot1 3s cubic-bezier(.55,.3,.24,.99) infinite}
.loader > .dot:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:dot2}
.loader > .dot:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:dot3}
@keyframes dot1{3{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},97{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},36{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},69{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}
@keyframes dot2{3{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},97{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},36{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},69{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}
@keyframes dot3{3{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},97{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:40px;height:20px;margin-top:50px;margin-left:-20px}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},36{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},69{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}
Efek Animasi Loading:

Spinner Ball

HTML












CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};z-index:1;height:40px;width:40px;transform:translate(-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},-50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078})}
[class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} 0}
@keyframes circleRotate{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
Efek Animasi Loading: 

8 Bit

HTML



CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{animation:spin 1s linear infinite;height:10px;width:10px;position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:-5px}
@keyframes spin{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}6.25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}12.5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}18.75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}31.25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}37.5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px #000,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px transparent,-10px -30px transparent}43.75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px #000,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px transparent}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px transparent,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px #000,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}56.25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px transparent,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px #000,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}62.5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px transparent,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px #000,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}68.75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px transparent,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px #000,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 transparent,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 #000,-30px -10px #000,-20px -20px #000,-10px -30px #000}81.25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px transparent,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px #000,-20px -20px #000,-10px -30px #000}87.5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px transparent,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px #000,-10px -30px #000}93.75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px transparent,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px #000}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{box-shadow:0 -30px #000,10px -30px #000,20px -20px #000,30px -10px #000,30px 0 #000,30px 10px #000,20px 20px #000,10px 30px #000,0px 30px transparent,-10px 30px transparent,-20px 20px transparent,-30px 10px transparent,-30px 0 transparent,-30px -10px transparent,-20px -20px transparent,-10px -30px transparent}}
Efek Animasi Loading:

Swift

HTML




















CSS


/* Preloader */
#preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin-left:-50px;left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:speeder .4s linear infinite}
.spinner > span{height:5px;width:35px;background:#000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0}
.base span{position:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #000;border-bottom:6px solid transparent}
.base span:before{content:"";height:22px;width:22px;border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};background:#000;position:absolute;right:-110px;top:-16px}
.base span:after{content:"";position:absolute;width:0;height:0;border-top:0 solid transparent;border-right:55px solid #000;border-bottom:16px solid transparent;top:-16px;right:-98px}
.face{position:absolute;height:12px;width:20px;background:#000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px}
.face:after{content:"";height:12px;width:12px;background:#000;right:4px;top:7px;position:absolute;transform:rotate(40deg);transform-origin:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} 50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};border-radius:0 0 0 2px}
.spinner > span > span:nth-child(1),.spinner > span > span:nth-child(2),.spinner > span > span:nth-child(3),.spinner > span > span:nth-child(4){width:30px;height:1px;background:#000;position:absolute;animation:fazer1 .2s linear infinite}
.spinner > span > span:nth-child(2){top:3px;animation:fazer2 .4s linear infinite}
.spinner > span > span:nth-child(3){top:1px;animation:fazer3 .4s linear infinite;animation-delay:-1s}
.spinner > span > span:nth-child(4){top:4px;animation:fazer4 1s linear infinite;animation-delay:-1s}
@keyframes fazer1{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-80px;opacity:0}}
@keyframes fazer2{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-100px;opacity:0}}
@keyframes fazer3{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-50px;opacity:0}}
@keyframes fazer4{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-150px;opacity:0}}
@keyframes speeder{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(2px,1px) rotate(0deg)}10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-1px,-3px) rotate(-1deg)}20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-2px,0px) rotate(1deg)}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(1px,2px) rotate(0deg)}40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(1px,-1px) rotate(1deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-1px,3px) rotate(-1deg)}60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-1px,1px) rotate(0deg)}70{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(3px,1px) rotate(-1deg)}80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(-2px,-1px) rotate(1deg)}90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(2px,1px) rotate(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translate(1px,-2px) rotate(-1deg)}}
.longfazers{position:absolute;width:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}
.longfazers span{position:absolute;height:2px;width:20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};background:#000}
.longfazers span:nth-child(1){top:20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:lf .6s linear infinite;animation-delay:-5s}
.longfazers span:nth-child(2){top:40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:lf2 .8s linear infinite;animation-delay:-1s}
.longfazers span:nth-child(3){top:60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:lf3 .6s linear infinite}
.longfazers span:nth-child(4){top:80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:lf4 .5s linear infinite;animation-delay:-3s}
@keyframes lf{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};opacity:0}}
@keyframes lf2{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};opacity:0}}
@keyframes lf3{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};opacity:0}}
@keyframes lf4{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:200{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:-100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};opacity:0}}
Efek Animasi Loading: 

Tron

HTML



CSS


/* Preloader */
#preloader{overflow:hidden;background:radial-gradient(#1f3a47, #0b1114);left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin-left:-50px;left:45{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),#000000 90{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078});transform-origin:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} 60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:perspective(200px) rotateX(66deg);animation:spinner-wiggle 1.2s infinite}
@keyframes spinner-wiggle{30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:perspective(200px) rotateX(66deg)}40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:perspective(200px) rotateX(65deg)}50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:perspective(200px) rotateX(68deg)}60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:perspective(200px) rotateX(64deg)}}
.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8) infinite,spinner-fade 1.2s linear infinite}
.spinner:before{border-top-color:#66e6ff}
.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}
@keyframes spinner-spin{100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(360deg)}}
@keyframes spinner-fade{20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:.1}40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:1}60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:.1}}
Efek Animasi Loading: 

Hexagon

HTML










CSS


/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
@keyframes preload-show-1{from{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-1{to{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-1{5{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(60deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}80{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-show-2{from{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-2{to{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-2{10{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}15{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},70{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(120deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}75{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-show-3{from{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-3{to{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-3{15{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},65{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(180deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}70{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-show-4{from{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-4{to{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-4{20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(240deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}65{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-show-5{from{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-5{to{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-5{25{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},55{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(300deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}60{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-show-6{from{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-hide-6{to{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-cycle-6{30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}35{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(360deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}55{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
@keyframes preload-flip{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateY(0deg) rotateZ(-60deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotateY(360deg) rotateZ(-60deg)}}
.preloader{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};font-size:20px;display:block;width:3.75em;height:4.25em;margin-left:-1.875em;margin-top:-2.125em;transform-origin:center center;transform:rotateY(180deg) rotateZ(-60deg)}
.preloader .slice{border-top:1.125em solid transparent;border-right:none;border-bottom:1em solid transparent;border-left:1.875em solid #f7484e;position:absolute;top:0;left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform-origin:left bottom;border-radius:3px 3px 0 0}
.preloader .slice:nth-child(1){transform:rotateZ(60deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.82s preload-hide-1 both 1}
.preloader .slice:nth-child(2){transform:rotateZ(120deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.74s preload-hide-2 both 1}
.preloader .slice:nth-child(3){transform:rotateZ(180deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.66s preload-hide-3 both 1}
.preloader .slice:nth-child(4){transform:rotateZ(240deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.58s preload-hide-4 both 1}
.preloader .slice:nth-child(5){transform:rotateZ(300deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.5s preload-hide-5 both 1}
.preloader .slice:nth-child(6){transform:rotateZ(360deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.42s preload-hide-6 both 1}
.preloader.loading{animation:2s preload-flip steps(2) infinite both}
.preloader.loading .slice:nth-child(1){transform:rotateZ(60deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-1 linear infinite both}
.preloader.loading .slice:nth-child(2){transform:rotateZ(120deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-2 linear infinite both}
.preloader.loading .slice:nth-child(3){transform:rotateZ(180deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-3 linear infinite both}
.preloader.loading .slice:nth-child(4){transform:rotateZ(240deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-4 linear infinite both}
.preloader.loading .slice:nth-child(5){transform:rotateZ(300deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-5 linear infinite both}
.preloader.loading .slice:nth-child(6){transform:rotateZ(360deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-6 linear infinite both}
Efek Animasi Loading: 

Old Facebook

HTML











CSS


/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#status{width:50px;height:30px;position:fixed;left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b2;height:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{-webkit-transform:scaleY(0.4)}20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078},100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
Efek Animasi Loading:

Circular

HTML





CSS


/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};animation:rotate 1s infinite linear}
@keyframes rotate{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(0deg)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:rotate(360deg)}}
Efek Animasi Loading:

Perspective

HTML




L

O

A

D

I

N

G



CSS


/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner > .preloader-box{position:absolute;width:345px;height:30px;top:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};margin:-15px 0 0 -150px;-webkit-perspective:200px}
.spinner .preloader-box > div{position:relative;width:30px;height:30px;background:#CCC;float:left;text-align:center;line-height:30px;font-family:Verdana;font-size:20px;color:#FFF}
.spinner .preloader-box > div:nth-child(1){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 0ms infinite alternate}
.spinner .preloader-box > div:nth-child(2){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 75ms infinite alternate}
.spinner .preloader-box > div:nth-child(3){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 150ms infinite alternate}
.spinner .preloader-box > div:nth-child(4){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 225ms infinite alternate}
.spinner .preloader-box > div:nth-child(5){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 300ms infinite alternate}
.spinner .preloader-box > div:nth-child(6){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 375ms infinite alternate}
.spinner .preloader-box > div:nth-child(7){background:#3366FF;margin-right:15px;-webkit-animation:movement 600ms ease 450ms infinite alternate}
.spinner .preloader-box > div:nth-child(8){background:#3366FF;-webkit-animation:movement 600ms ease 525ms infinite alternate}
@-webkit-keyframes movement{from{-webkit-transform:scale(1.0) translateY(0px) rotateX(0deg);box-shadow:0 0 0 rgba(0,0,0,0)}to{-webkit-transform:scale(1.5) translateY(-25px) rotateX(45deg);box-shadow:0 25px 40px rgba(0,0,0,0.4);background:#3399FF}}
Efek Animasi Loading:

Moving Dot

HTML












CSS


/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader{15{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateX(0)}45{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateX(230px)}65{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateX(230px)}95{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{transform:translateX(0)}}
Efek Animasi Loading:

Flying Letter

HTML



G

N

I

D

A

O

L

CSS


/* Preloader */
#preloader{overflow:hidden;background:#27ae60;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#load{font-size:2rem;position:absolute;top:40{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};left:0;right:0;bottom:0;margin:auto;text-align:center;max-width:600px;overflow:visible;user-select:none;cursor:default}
#load div{position:absolute;width:20px;height:36px;opacity:0;animation:move 2s linear infinite;transform:rotate(180deg);color:#fff}
#load div:nth-child(2){animation-delay:0.2s}
#load div:nth-child(3){animation-delay:0.4s}
#load div:nth-child(4){animation-delay:0.6s}
#load div:nth-child(5){animation-delay:0.8s}
#load div:nth-child(6){animation-delay:1s}
#load div:nth-child(7){animation-delay:1.2s}
@keyframes move{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:0;opacity:0}35{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:41{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:rotate(0deg);opacity:1}65{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:59{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:rotate(0deg);opacity:1}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{left:100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078};transform:rotate(-180deg);opacity:0}}
Efek Animasi Loading:

SVG Animation

HTML






<path class="ld-o" fill="#39C0C4" d="M74.7,25.1c0,1.5-0.3,2.9-0.8,4.2c-0.5,1.3-1.2,2.4-2.2,3.3c-0.9,0.9-2,1.6-3.3,2.2
c-1.3,0.5-2.6,0.8-4.1,0.8s-2.8-0.3-4.1-0.8c-1.3-0.5-2.4-1.2-3.3-2.2s-1.6-2-2.2-3.3C54.3,28,54,26.6,54,25.1s0.3-2.9,0.8-4.2
c0.5-1.3,1.2-2.4,2.2-3.3s2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8s2.8,0.3,4.1,0.8c1.3,0.5,2.4,1.2,3.3,2.2c0.9,0.9,1.6,2,2.2,3.3
C74.4,22.2,74.7,23.6,74.7,25.1z M72.5,25.1c0-1.2-0.2-2.3-0.6-3.3c-0.4-1-0.9-2-1.6-2.8c-0.7-0.8-1.6-1.4-2.6-1.9
c-1-0.5-2.2-0.7-3.4-0.7c-1.3,0-2.4,0.2-3.4,0.7c-1,0.5-1.9,1.1-2.6,1.9c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3
c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9c1,0.5,2.2,0.7,3.4,0.7c1.3,0,2.4-0.2,3.4-0.7
c1-0.5,1.9-1.1,2.6-1.9c0.7-0.8,1.3-1.7,1.6-2.7C72.4,27.4,72.5,26.3,72.5,25.1z"/>

<path class="ld-d" fill="#39C0C4" d="M98,15.2h6.6c1.2,0,2.5,0.2,3.7,0.6c1.2,0.4,2.4,1,3.4,1.9c1,0.8,1.8,1.9,2.4,3.1s0.9,2.7,0.9,4.3
c0,1.7-0.3,3.1-0.9,4.3s-1.4,2.3-2.4,3.1c-1,0.8-2.1,1.5-3.4,1.9c-1.2,0.4-2.5,0.6-3.7,0.6H98V15.2z M100,33.2h4
c1.5,0,2.8-0.2,3.9-0.7c1.1-0.5,2-1.1,2.8-1.8c0.7-0.8,1.3-1.6,1.6-2.6s0.5-2,0.5-3c0-1-0.2-2-0.5-3c-0.4-1-0.9-1.8-1.6-2.6
c-0.7-0.8-1.6-1.4-2.8-1.8c-1.1-0.5-2.4-0.7-3.9-0.7h-4V33.2z"/>


<path class="ld-g" fill="#39C0C4" d="M162.9,18.8c-0.7-0.7-1.5-1.3-2.5-1.7c-1-0.4-2-0.6-3.3-0.6c-1.3,0-2.4,0.2-3.4,0.7s-1.9,1.1-2.6,1.9
c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9
s2.2,0.7,3.4,0.7c1.1,0,2.1-0.1,3.1-0.4c0.9-0.2,1.7-0.5,2.3-0.9v-6h-4.6v-1.8h6.6v9c-1.1,0.7-2.2,1.1-3.5,1.5
c-1.3,0.3-2.5,0.5-3.9,0.5c-1.5,0-2.9-0.3-4.1-0.8s-2.4-1.2-3.3-2.2c-0.9-0.9-1.6-2-2.1-3.3s-0.8-2.7-0.8-4.2s0.3-2.9,0.8-4.2
c0.5-1.3,1.2-2.4,2.2-3.3c0.9-0.9,2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8c1.6,0,3,0.2,4.1,0.7s2.2,1.1,3,2L162.9,18.8z"/>




CSS

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
#loading{position:absolute;left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 100px);top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 25px);z-index:9999}
.uil-ripple{position:absolute;left:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 90px);top:calc(50{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078} - 90px);opacity:.5;z-index:999}
.ld-l{opacity:0;animation:ld-in 3s 0.0s ease infinite}
.ld-o{opacity:0;animation:ld-in 3s 0.1s ease infinite}
.ld-a{opacity:0;animation:ld-in 3s 0.2s ease infinite}
.ld-d{opacity:0;animation:ld-in 3s 0.3s ease infinite}
.ld-i{opacity:0;animation:ld-in 3s 0.4s ease infinite}
.ld-n{opacity:0;animation:ld-in 3s 0.5s ease infinite}
.ld-g{opacity:0;animation:ld-in 3s 0.6s ease infinite}
@keyframes ld-in{0{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:0;transform:scale(0)}30{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:1;transform:scale(1)}100{fef3d1ce01c93914c2ebdf89aa0d999b8402562a185980567c2d04d1d1eff078}{opacity:1;transform:scale(1)}}

Penutup

Demikianlah panduan cara memasang efek animasi pada loading blog, cara-cara diatas saya sampaikan secara detail dan terperinci guna memudahkan para pembaca dalam memahami serta mengaplikasikan setiap langkahnya.

Perlu diperhatikan bahwa setiap kode yang saya gunakan pada artikel ini diambil secara langsung dari situs arlinadzgn.com. Jadi jika dirasa terdapat kesalahan dalam penggunaan kode, anda bisa mengunjungi situs sumber ini, guna mendapat informasi yang lebih lengkap.

Akhir kata saya ucapkan terimakasih, dan semoga artikel mengenai cara memasang efek animasi pada blog ini dapat bermanfaat bagi yang membutuhkan ya. Terus kunjungi situs blog ini, untuk mendapatkan informasi terbaru.

Leave a Reply