Cara Memasang Efek Preloader Keren di Blogger

arsipbiru_memasang-efek-preloader-keren-di-blogger

Arsipbiru.com - Efek preloader merupakan suatu fitur yang memberikan efek animasi loading pada saat halaman web atau blog dimuat. Adanya efek tersebut akan membuat tampilan web menjadi sangat menarik. Untuk menambahkan efek preloader di blog terbilang cukup mudah. Hanya perlu menambahkan sedikit barisan kode JavaScript, HTML, dan CSS, kita sudah dapat membuat preloader pada blog kita.

Pengertian Preloader

Tahukah Anda apa itu preloader? Preloader merupakan sebuah fitur yang menampilkan proses load pada sebuah tampilan website. Biasanya proses load ini muncul di awal pada saat Anda membuka suatu website. Preloader ini dapat dibuat dengan menggunakan barisan kode HTML, CSS, dan Javascript.

Tujuan Memasang Efek Preloader

Memasang efek preloader tentunya memiliki tujuan tertentu. Berikut ini tujuan menambahkan efek preloader pada website.

Menyamarkan Proses Loading pada Website

Saat membuka suatu website, akan ada suatu proses memuat gambar, data, bahkan request dari server secara otomatis. Dalam proses tersebut bisa jadi membutuhkan waktu yang cukup lama. Jika proses berhasil, maka tampilan website akan dimunculkan secara keseluruhan. Namun, tidak sedikit juga yang mengalami kegagalan dalam proses tersebut. Sehingga tampilan website akan menjadi kosong, atau tidak muncul apa-apa alias blank. Nah, untuk menyiasati agar proses loading pada website disamarkan, mereka biasanya menambahkan efek preloader di website mereka. Jadi, ketika proses loading pada website terjadi sangat lambat atau mengalami kegagalan, maka yang akan ditampilkan terlebih dahulu adalah efek preloader tersebut.

Memberikan Kenyamanan Pengunjung Website

Kenyamanan pengunjung merupakan hal wajib diperhatikan. Sebab hal ini sangat penting bagi sebuah website. Jika pengunjung nyaman dengan website yang dikunjungi, maka ia akan merasa betah atau akan mengunjungi kembali websitenya. Hal ini tentu akan meningkatkan trafik pengunjung. Nah, apa kaitannya memberikan efek preloader pada website dengan kenyamanan pengunjung? Memberikan efek preloader pada website ditengarai dapat meningkatkan kenyamanan pengunjung. Apalagi sekarang ini banyak efek preloader yang user interface (UI). Sehingga ketika kita menambahkan efek preloader pada website tidak akan mengurangi kenyamanan pengunjung. Justru dengan adanya efek preloader tersebut, pengunjung tidak harus melihat proses load website secara langsung yang bisa saja memakan waktu yang cukup lama.

Membuat Website Terlihat Keren dan Profesional

Mungkin sebagian orang menginginkan websitenya terlihat keren dan profesional. Berbagai hal telah banyak diupayakan demi tampilan website-nya terlihat keren. Salah satunya dengan menambahkan efek preloader pada website. Dengan menambahkan efek preloader ini tentu saja akan memberikan kesan lebih keren dan profesional pada tampilan website. Hal ini tentu dapat meningkatkan kenyamanan pengunjung yang berdampak pada trafik.

Kelebihan dan Kekurangan Memasang Efek Preloader

Memasang efek preloader tentu memiliki kelebihan dan kerugian tersendiri. Kelebihan memasang efek preloader pada website tentu sangat bagus. Sebab hal tersebut akan membuat pengunjung tidak berburuk sangka terlebih dahulu ketika melihat tampilan website acak-acakan karena semua kode belum dimuat seluruhnya. Dengan adanya efek preloader halaman website akan ditutupi sepenuhnya oleh preloader dan ketika semua kode telah dimuat oleh browser maka preloader akan otomatis menghilang dari hadapan pengunjung.

Selain memiliki kelebihan, memasang efek preloader tentu memiliki kekurangan. Kekurangan dalam menambahkan efek preloader pada website, mungkin bisa membuat jenuh dan bosan pengunjung ketika koneksi internet pengunjung tersebut sedang lambat. Pengunjung hanya akan melihat animasi loading yang berputar-putar saja. Sedangkan preloader ini akan hilang, jika halaman website sudah dimuat seluruhnya.

Namun, hal ini masih bisa kita atasi dengan membuat maksimal waktu preloader. Misalnya, jika maksimal waktu preloader diatur selama 5000ms, maka waktu untuk memuat halaman melebihi waktu yang ditentukan, preloader akan disembunyikan. Dengan cara tersebut tentu memiliki suatu risiko, yakni ketika website baru dimuat setengah dalam waktu 5000ms dan preloader disembunyikan, maka hanya akan menampilkan website dengan tidak semestinya.

Alternatif lain yang lebih efektif yang dapat dilakukan adalah mengganti efek preloader yang awalnya berputar-putar dengan efek preloader yang dapat berubah-ubah atau dengan efek preloader yang lebih menarik lagi agar pengunjung tidak bosan menunggu website dimuat dengan waktu yang cukup lama.

Cara Memasang Efek Preloader Keren di Blogger

Sebelum menambahkan kode yang akan saya bagikan ini, alangkah baiknya cek terlebih dahulu apakah template Anda telah menggunakan jQuery. Jika belum terpasang, silahkan Anda tambahkan jQuery versi terbaru berikut ini di atas kode </head>.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Jika template Anda sudah menggunakan jQuery, maka Anda dapat memasang efek preloading berikut ini di blog Anda. Berikut langkah-langkah dalam memasang efek preloading di blogger.

1. Masuk ke Blogger > pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

2. Lalu, tambahkan kode berikut ini sebelum </body> atau </body>

<script>

//<![CDATA[

// Preloader

$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});

//]]>

</script>

3. Kemudian tambahkan kode HTML berikut ini tepat di bawah <body>.


<div id='preloader'>

<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='https://www.w3.org/2000/svg'>

   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>

</svg>

</div>

4. Selanjutnya tambahkan kode CSS berikut ini sebelum </head> atau </head>


<style>

/* 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% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}

@keyframes rotator{0%{transform:rotate(0deg)}100%{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%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}

@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}

</style>

5. Selanjutnya, simpan Tema dan lihat hasilnya.

Berikut tampilan efek preloader keren tersebut.

Opsi Lain Efek Preloader

Berikut ini beberapa opsi lain efek preloader yang saya sediakan dan dapat disesuaikan dengan kebutuhan. Seperti halnya cara di atas, hanya saja yang diganti kode HTML dan kode CSS.

Bounce Dot

HTML

<div id='preloader'>

<div id='container' class='spinner'>

  <div id='dot'></div>

    <div class='step' id='s1'></div>

    <div class='step' id='s2'></div>

    <div class='step' id='s3'></div>

</div>

</div>

CSS

<style>

/* 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%;left:50%}

#dot{background:#FFF;border-radius:50%;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%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}

.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}

@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{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}

</style>

Tampilan Bounce Dot Style

Pacman

HTML

<div id='preloader'>

<div class='loader spinner'>

  <div class='circles'>

    <span class='one'></span>

    <span class='two'></span>

    <span class='three'></span>

  </div>

  <div class='pacman'>

    <span class='top'></span>

    <span class='bottom'></span>

    <span class='left'></span>

    <div class='eye'></div>

  </div>

</div>

</div>

CSS

<style>

/* 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%;left:50%;transform:translate(-50%,-50%)}

.loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

.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%{transform:translate(0px,0px)}100%{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%,100%{transform:rotate(0deg)}50%{transform:rotate(-45deg)}}

.pacman .bottom{animation:animbottom 0.5s infinite}

@keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{transform:rotate(45deg)}}

</style>

Tampilan Pacman Style

Square

HTML

<div id='preloader'>

<div class='loader spinner'>

<div class='l_main'>

  <div class='l_square'><span></span><span></span><span></span></div>

  <div class='l_square'><span></span><span></span><span></span></div>

  <div class='l_square'><span></span><span></span><span></span></div>

  <div class='l_square'><span></span><span></span><span></span></div>

</div>

</div>

</div>

CSS

<style>

/* 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%;left:50%;transform:translate(-50%,-50%);}

.loader{height:100%;width:100%}

.loader .l_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

@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%,5%,95%,100%{transform:translate(0px,0px) rotate(0deg)}30%,70%{transform:translate(-40px,0px) rotate(-90deg)}}

@keyframes animsquare2{0%,10%,90%,100%{transform:translate(0px,0px) rotate(0deg)}35%,65%{transform:translate(-40px,0px) rotate(-90deg)}}

@keyframes animsquare3{0%,15%,85%,100%{transform:translate(0px,0px) rotate(0deg)}40%,60%{transform:translate(-40px,0px) rotate(-90deg)}}

@keyframes animsquare4{0%,20%,80%,100%{transform:translate(0px,0px) rotate(0deg)}45%,55%{transform:translate(-40px,0px) rotate(-90deg)}}

</style>

Tampilan Square Style

Running Dot

HTML

<div id='preloader'>

<div id='loader' class='spinner'>

    <div id='d1'></div>

    <div id='d2'></div>

    <div id='d3'></div>

    <div id='d4'></div>

    <div id='d5'></div>

</div>

</div>

CSS

<style>

/* 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%;left:50%;margin:-20px -50px}

#loader div{width:10px;height:10px;background:#FFF;border-radius:50%;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%{left:100px;top:0}80%{left:0;top:0}85%{left:0;top:-10px;width:10px;height:10px}90%{width:20px;height:15px}95%{left:100px;top:-10px;width:10px;height:10px}100%{left:100px;top:0}}

</style>

Tampilan Running Dot Style

Circle

HTML

<div id='preloader'>

<div class='spinner'>

  <div class='inner one'></div>

  <div class='inner two'></div>

  <div class='inner three'></div>

</div>

</div>

CSS

<style>

/* 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% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px}

.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}

.inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA}

.inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA}

.inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA}

@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}

@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}

@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}

</style>

Tampilan Circle Style

Reversed Dot

HTML

<div id='preloader'>

<div class='spinner'>

<ul class='loading reversed'>

      <li></li>

      <li></li>

      <li></li>

    </ul>

</div>

</div>

CSS

<style>

/* 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%;left:50%;transform:translate(-50%,-50%);}

.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%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;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%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}}

</style>

Tampilan Reversed Dot Style

Jelly Box

HTML

<div id='preloader'>

<div id='loader' class='spinner'>

  <div id='shadow'></div>

  <div id='box'></div>

</div>

</div>

CSS

<style>

/* 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% - 20px);left:calc(50% - 20px)}

@keyframes loader{0%{left:-100px}100%{left:110%}}

#box{width:50px;height:50px;background:#fff;animation:animate .5s linear infinite;position:absolute;top:0;left:0;border-radius:3px}

@keyframes animate{17%{border-bottom-right-radius:3px}25%{transform:translateY(9px) rotate(22.5deg)}50%{transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px}75%{transform:translateY(9px) rotate(67.5deg)}100%{transform:translateY(0) rotate(90deg)}}

#shadow{width:50px;height:5px;background:#000;opacity:0.1;position:absolute;top:59px;left:0;border-radius:50%;animation:shadow .5s linear infinite}

@keyframes shadow{50%{transform:scale(1.2,1)}}

</style>

Tampilan Jelly Box Style

Hourglass

HTML

<div id='preloader'>

<div id='loader' class='spinner'>

  <div id='top'></div>

  <div id='bottom'></div>

  <div id='line'></div>

</div>

</div>

CSS

<style>

/* 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% - 20px);left:calc(50% - 20px)}

@keyframes loader{90%{transform:rotate(0deg)}100%{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% 100%}

@keyframes top{90%{transform:scale(0)}100%{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% 100%}

@keyframes bottom{10%{transform:scale(0)}90%{transform:scale(1)}100%{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%{height:20px}100%{height:20px}}

</style>

Tampilan Hourglass Style

Spring Line

HTML

<div id='preloader'>

<div id='container' class='spinner'>

  <div id='loader'></div>  

</div>

</div>

CSS

<style>

/* 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% - 17px);left:calc(50% - 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%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}

@keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}

</style>

Tampilan Spring Line Style

Square Loader

HTML

<div id='preloader'>

<div class='spinner'>

<span class='loader'><span class='loader-inner'></span></span>

</div>

</div>

CSS

<style>

/* 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%;left:50%;transform:translate(-50%,-50%)}

.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #0984e3;top:50%;animation:loader 2s infinite ease}

.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#0984e3;animation:loader-inner 2s infinite ease-in}

@keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}

@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}

</style>

Tampilan Square Loader Style

Tech Loader

HTML

<div id='preloader'>

<div class='loader spinner'>

  <div class='dot'></div>

  <div class='dot'></div>

  <div class='dot'></div>

</div>

</div>

CSS

<style>

/* Preloader */

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px}

.loader > .dot{position:absolute;top:50%;left:50%;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%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}

@keyframes dot2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}

@keyframes dot3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}

</style>

Tampilan Tech Loader Style

Spinner Ball

HTML

<div id='preloader'>

<div class='spinner'>

  <span class='ball-1'></span>

  <span class='ball-2'></span>

  <span class='ball-3'></span>

  <span class='ball-4'></span>

  <span class='ball-5'></span>

  <span class='ball-6'></span>

  <span class='ball-7'></span>

  <span class='ball-8'></span>

</div>

</div>

CSS

<style>

/* Preloader */

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}

[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% 0}

@keyframes circleRotate{0%{transform:rotate(0deg)}100%{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)}

</style>

Tampilan Spinner Ball Style

8 Bit

HTML

<div id='preloader'>

<div id='loader' class='spinner'></div>

</div>

CSS

<style>

/* 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%;left:50%;margin:-5px}

@keyframes spin{0%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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%{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}}

</style>

Tampilan 8 Bit Style

Swift

HTML

<div id='preloader'>

<div class='spinner'>

  <span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

  </span>

  <div class='base'>

    <span></span>

    <div class='face'></div>

  </div>

</div>

<div class='longfazers'>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

</div>

CSS

<style>

/* Preloader */

#preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.spinner{position:absolute;top:50%;margin-left:-50px;left:50%;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%;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% 50%;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%{left:0}100%{left:-80px;opacity:0}}

@keyframes fazer2{0%{left:0}100%{left:-100px;opacity:0}}

@keyframes fazer3{0%{left:0}100%{left:-50px;opacity:0}}

@keyframes fazer4{0%{left:0}100%{left:-150px;opacity:0}}

@keyframes speeder{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-3px) rotate(-1deg)}20%{transform:translate(-2px,0px) rotate(1deg)}30%{transform:translate(1px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,3px) rotate(-1deg)}60%{transform:translate(-1px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-2px,-1px) rotate(1deg)}90%{transform:translate(2px,1px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}}

.longfazers{position:absolute;width:100%;height:100%}

.longfazers span{position:absolute;height:2px;width:20%;background:#000}

.longfazers span:nth-child(1){top:20%;animation:lf .6s linear infinite;animation-delay:-5s}

.longfazers span:nth-child(2){top:40%;animation:lf2 .8s linear infinite;animation-delay:-1s}

.longfazers span:nth-child(3){top:60%;animation:lf3 .6s linear infinite}

.longfazers span:nth-child(4){top:80%;animation:lf4 .5s linear infinite;animation-delay:-3s}

@keyframes lf{0%{left:200%}100%{left:-200%;opacity:0}}

@keyframes lf2{0%{left:200%}100%{left:-200%;opacity:0}}

@keyframes lf3{0%{left:200%}100%{left:-100%;opacity:0}}

@keyframes lf4{0%{left:200%}100%{left:-100%;opacity:0}}

</style>

Tampilan Swift Style

Tron

HTML

<div id='preloader'>

<div class='spinner'></div>

</div>

CSS

<style>

/* 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%;margin-left:-50px;left:45%;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%);transform-origin:50% 60%;transform:perspective(200px) rotateX(66deg);animation:spinner-wiggle 1.2s infinite}

@keyframes spinner-wiggle{30%{transform:perspective(200px) rotateX(66deg)}40%{transform:perspective(200px) rotateX(65deg)}50%{transform:perspective(200px) rotateX(68deg)}60%{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%{transform:rotate(360deg)}}

@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}

</style>

Tampilan Tron Style

Google Chrome

HTML

<div id='preloader'>

<div class='spinner'>

<div class='loader tri'></div>

<div class='loader tri2'></div>

<div class='loader tri3'></div>

<div class='loader tri4'></div>

<div class='loader circ'></div>

<div class='loader circ2'></div>

</div>

</div>

CSS

<style>

/* Preloader */

#preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}

.tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2}

.tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1}

.tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1}

.tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2}

.circ{border:30px solid rgba(255,255,255,0.1)}

.circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90}

@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

</style>

Tampilan Google Chrome Style

Hexagon

HTML

<div id='preloader'>

<div class='preloader loading spinner'>

  <span class='slice'></span>

  <span class='slice'></span>

  <span class='slice'></span>

  <span class='slice'></span>

  <span class='slice'></span>

  <span class='slice'></span>

</div>

</div>

CSS

<style>

/* 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%{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}10%,75%{transform:rotateZ(60deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}80%,100%{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%{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}15%,70%{transform:rotateZ(120deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}75%,100%{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%{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}20%,65%{transform:rotateZ(180deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}70%,100%{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%{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}25%,60%{transform:rotateZ(240deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}65%,100%{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%{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}30%,55%{transform:rotateZ(300deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}60%,100%{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%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}35%,50%{transform:rotateZ(360deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}55%,100%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}

@keyframes preload-flip{0%{transform:rotateY(0deg) rotateZ(-60deg)}100%{transform:rotateY(360deg) rotateZ(-60deg)}}

.preloader{position:absolute;top:50%;left:50%;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%;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}

</style>

Tampilan Hexagon Style

Old Facebook

HTML

<div id='preloader'>

  <div id='status'>

     <div class='spinner'>

      <div class='rect1'></div>

      <div class='rect2'></div>

      <div class='rect3'></div>

      <div class='rect4'></div>

      <div class='rect5'></div>

    </div>

  </div>

</div>

CSS

<style>

/* 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%;top:50%;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%;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%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}

@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}

</style>

Tampilan Old Facebook

Circular

HTML

<div id='preloader'>

<div id='loader'>

  <span class='spinner'></span>

</div>

</div>

CSS

<style>

/* Preloader */

#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}

#loader{position:absolute;top:50%;left:50%;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%;animation:rotate 1s infinite linear}

@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

</style>

Tampilan Circular Style

Perspective

HTML

<div id='preloader'>

<div class='spinner'>

    <div class='preloader-box'>

        <div>L</div>

        <div>O</div>

        <div>A</div>

        <div>D</div>

        <div>I</div>

        <div>N</div>

        <div>G</div>

    </div>

</div>

</div>

CSS

<style>

/* 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%;left:50%;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}}

</style>

Tampilan Perspective Style

Moving Dot

HTML

<div id='preloader'>

<div class='spinner'>

  <div class='loader'>

    <div class='moving-dot'></div>

    <div class='moving-dot'></div>

    <div class='moving-dot'></div>

    <div class='moving-dot'></div>

    <div class='moving-dot'></div>

    <div class='moving-dot'></div>

  </div>

</div>

</div>

CSS

<style>

/* 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%;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%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}

</style>

Tampilan Moving Dot Style

Flying Letter

HTML

<div id='preloader'>

<div id='load' class='spinner'>

  <div>G</div>

  <div>N</div>

  <div>I</div>

  <div>D</div>

  <div>A</div>

  <div>O</div>

  <div>L</div>

</div>

CSS

<style>

/* 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%;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%{left:0;opacity:0}35%{left:41%;transform:rotate(0deg);opacity:1}65%{left:59%;transform:rotate(0deg);opacity:1}100%{left:100%;transform:rotate(-180deg);opacity:0}}

</style>

Tampilan Flying Letter Style

SVG Animation

HTML

<div id='preloader'>

<div class='spinner'>

<svg id="loading">

<g>

    <path class="ld-l" fill="#39C0C4" d="M43.6,33.2h9.2V35H41.6V15.2h2V33.2z"/>

    <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-a" fill="#39C0C4" d="M78.2,35H76l8.6-19.8h2L95.1,35h-2.2l-2.2-5.2H80.4L78.2,35z M81.1,27.9h8.7l-4.4-10.5L81.1,27.9z"/>

    <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-i" fill="#39C0C4" d="M121.2,35h-2V15.2h2V35z"/>

    <path class="ld-n" fill="#39C0C4" d="M140.5,32.1L140.5,32.1l0.1-16.9h2V35h-2.5l-11.5-17.1h-0.1V35h-2V15.2h2.5L140.5,32.1z"/>

    <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"/>

</g>

</svg>

<svg width='182px' height='182px' xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ripple"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g> <animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g><g><animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g></svg>

</div>

</div>

CSS

<style>

/* 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}

#loading{position:absolute;left:calc(50% - 100px);top:calc(50% - 25px);z-index:9999}

.uil-ripple{position:absolute;left:calc(50% - 90px);top:calc(50% - 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%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

</style>

Tampilan SVG Animation Style

Demikianlah tutorial bagaimana cara membuat preloading keren di Blogger. Semoga bermanfaat.

Mau donasi lewat mana?

Trakteer Saweria

N/A

Traktir creator minum kopi dengan cara memberikan sedikit donasi.

Cara Memasang Efek Preloader Keren di Blogger

Pengertian Preloader

Tujuan Memasang Efek Preloader

Menyamarkan Proses Loading pada Website

Memberikan Kenyamanan Pengunjung Website

Membuat Website Terlihat Keren dan Profesional

Kelebihan dan Kekurangan Memasang Efek Preloader

Cara Memasang Efek Preloader Keren di Blogger

Opsi Lain Efek Preloader

Bounce Dot

Pacman

Square

Running Dot

Circle

Reversed Dot

Jelly Box

Hourglass

Spring Line

Square Loader

Tech Loader

Spinner Ball

8 Bit

Swift

Tron

Google Chrome

Hexagon

Old Facebook

Circular

Perspective

Moving Dot

Flying Letter

SVG Animation

Mau donasi lewat mana?

Posting Komentar

Cara Setting Domain .eu.org di Blogger

Cara Membuat Syntax Highlighter dengan Tombol Copy di Blogger

Cara Membuat Sitemap Median UI di Blogger

Cara Membuat Baca Juga di Tengah Postingan Blog

Cara Membuat Maintenance Mode di Blogger

Generate Link