Paling-Top21 - Sebagai seorang pemilik blog tentunya kita wajib paham betul mengenai faktor-faktor dari kenyamanan pengunjung blog kita. Karena dalam dasarnya, pengunjung akan lebih senang membaca artikel dari suatu blog yg bisa menaruh 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 gampang digunakan serta sebagainya.
Nah dari kesemua faktor di atas, kali ini aku hanya akan membahas faktor pendorong hubungan 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 yg kadang kala seringkali diabaikan oleh kebanyakan pemilik situs blog, padahal secara tak langsung para pengunjung akan merasa sungkan buat membaca artikel lainnya jika proses loading ini membutuhkan waktu yg lama.
Mungkin, proses loading blog yang lambat bisa diatasi dengan gampang, kamu sanggup meningkatkan kecepatan proses loading ini bersama menyewa jasa para praktisi beserta membayar sejumlah nominal tertentu.
Tapi, mungkin juga anda tak punya uang untuk membayar jasa mereka. Nah buat itu anda mampu memakai pengaruh animasi berkiprah pada loading blog.
Dengan menerapkan efek beranjak ini tentunya, para pengunjung akan lebih tertarik untuk menikmati tampilan imbas animasi ini selama beberapa dikala, sampai proses loading selesai.
Penggunaan imbas animasi ini tertentunya akan menciptakan pengunjung bertahan beberapa saat hingga proses loading selesai, pada akhirnya pengunjung tak merasa bosan atau bahkan menutup situs blog kita.
Selain itu pengunjung juga tak akan sadar dengan lambatnya proses loading, sebab proses loading ini sudah disisipi efek animasi keren.
Satu lagi, efek animasi ini pula tidak akan memberatkan loading suatu blog. Jadi suatu misal kecepatan loading blog kamu berkisar antara 80%-85%, maka apabila kamu memasang efek animasi ini kedalam blog kamu, kecepatan loadingnya akan tetap sama.
Hal ini karena script kode dari impak animasi ini tidak menggunakan animasi bergambar yg berat mirip dengan dalam biasanya, seluruh kode atau script dalam pemasangan imbas animasi loading blog ini murni memakai CSS serta SVG tanpa disertai gambar, jadi bisa dipastikan akan sangat ringan bila dipakai.
Nah buat kamu yang ingin segera memasang pengaruh animasi beranjak ini kedalam situs blognya, mampu langsung mengikuti panduan dibawah ini:
1. Buka situs
Blogger.com>Tema>Edit HTML2. Kemudian pasang kode jQuery library versi 1.7.1 ini
dibawah kode
<head> template blog kamu:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
3. Pasang pula kode jQuery berikut ini
sebelum kode
</body><script type='text/javascript'>//<![CDATA[// Preloader$(window).load(function()$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css(overflow:"visible"));//]]></script>
4. Disusul pula beserta meletakkan kode berikut tepat
dibawah kode
<body> atau
setelah </head>HTML
<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>
5. Terakhir, letakkan kode CSS ini dia
sebelum </head>
CSS
<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite@keyframes rotator0%transform:rotate(0deg)100%transform:rotate(270deg).pathstroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite@keyframes colors0%stroke:#4285F425%stroke:#DE3E3550%stroke:#F7C22375%stroke:#1B9A59100%stroke:#4285F4@keyframes dash0%stroke-dashoffset:18750%stroke-dashoffset:46.75;transform:rotate(135deg)100%stroke-dashoffset:187;transform:rotate(450deg)</style>
6.
Simpan Tema, maka hasilnya akan seperti ini:
Selain itu, masih ada banyak varian impak animasi loading yang sanggup anda gunakan dalam blog kamu, jadi silahkan pilih dan sesuaikan saja efek animasi yg ada beserta situs blog anda.
Untuk memasang imbas animasi ini, kamu hanya perlu mengubah kode HTML dan CSS pada langkah nomor 4 serta 5 bersama kode HTML dan CCS dalam imbas animasi ini dia:
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#containermargin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%#dotbackground:#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 dot0%transform:scale(1,.7)20%transform:scale(.7,1.2)40%transform:scale(1,1)50%bottom:100px46%transform:scale(1,1)80%transform:scale(.7,1.2)90%transform:scale(.7,1.2)100%transform:scale(1,.7).stepposition:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0@-webkit-keyframes anim0%opacity:0;top:0;right:050%opacity:1100%top:90px;right:90px;opacity:0#s1animation:anim 1.8s linear infinite#s2animation:anim 1.8s linear infinite -.6s#s3animation:anim 1.8s linear infinite -1.2s</style>
Efek Animasi Loading: 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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#1C163A;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerlist-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%).loaderposition:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%).circlesposition:absolute;left:-5px;top:0;height:60px;width:180px.circles spanposition:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:#EFEFEF.circles span.oneright:80px.circles span.tworight:40px.circles span.threeright:0.circles-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear@keyframes animcircles0%transform:translate(0px,0px)100%transform:translate(-40px,0px).pacmanposition:absolute;left:0;top:0;height:60px;width:60px.pacman .eyeposition:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A.pacman spanposition:absolute;top:0;left:0;height:60px;width:60px.pacman span::beforecontent:"";position:absolute;left:0;height:30px;width:60px;background-color:#FFFB16.pacman .top::beforetop:0;border-radius:60px 60px 0 0.pacman .bottom::beforebottom:0;border-radius:0 0 60px 60px.pacman .left::beforebottom: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 animtop0%,100%transform:rotate(0deg)50%transform:rotate(-45deg).pacman .bottomanimation:animbottom 0.5s infinite@keyframes animbottom0%,100%-webkit-transform:rotate(0deg);transform:rotate(0deg)50%transform:rotate(45deg)</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerlist-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);.loaderheight:100%;width:100%.loader .L_mainposition: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_squareposition: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 spanposition: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 animsquare10%,5%,95%,100%transform:translate(0px,0px) rotate(0deg)30%,70%transform:translate(-40px,0px) rotate(-90deg)@keyframes animsquare20%,10%,90%,100%transform:translate(0px,0px) rotate(0deg)35%,65%transform:translate(-40px,0px) rotate(-90deg)@keyframes animsquare30%,15%,85%,100%transform:translate(0px,0px) rotate(0deg)40%,60%transform:translate(-40px,0px) rotate(-90deg)@keyframes animsquare40%,20%,80%,100%transform:translate(0px,0px) rotate(0deg)45%,55%transform:translate(-40px,0px) rotate(-90deg)</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#55efc4;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loaderwidth:100px;height:40px;position:absolute;top:50%;left:50%;margin:-20px -50px#loader divwidth:10px;height:10px;background:#FFF;border-radius:50%;position:absolute#d1animation:animate 2s linear infinite#d2animation:animate 2s linear infinite -.4s#d3animation:animate 2s linear infinite -.8s#d4animation:animate 2s linear infinite -1.2s#d5animation:animate 2s linear infinite -1.6s@-webkit-keyframes animate0%left:100px;top:080%left:0;top:085%left:0;top:-10px;width:10px;height:10px90%width:20px;height:15px95%left:100px;top:-10px;width:10px;height:10px100%left:100px;top:0</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px.innerposition:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%.inner.oneleft:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA.inner.tworight:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA.inner.threeright:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA@keyframes rotate-one0%transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)100%transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)@keyframes rotate-two0%transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)100%transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)@keyframes rotate-three0%transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)100%transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)</style>
Efek Animasi Loading:
Reversed Dot
HTML<div id='preloader'><div class='spinner'><ul class='loading reversed'> <li></li> <li></li> <li></li> </ul></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerlist-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);.loading.reversed lilist-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 liheight: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 LOADING0%transform:scale(0.5);background:#2b8ccd50%transform:scale(1);background:#fff100%transform:scale(0.5);background:#2b8ccd</style>
Efek Animasi Loading:
Jelly Box
HTML<div id='preloader'><div id='loader' class='spinner'> <div id='shadow'></div> <div id='box'></div></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loaderposition:absolute;top:calc(50% - 20px);left:calc(50% - 20px)@keyframes loader0%left:-100px100%left:110%#boxwidth:50px;height:50px;background:#fff;animation:animate .5s linear infinite;position:absolute;top:0;left:0;border-radius:3px@keyframes animate17%border-bottom-right-radius:3px25%transform:translateY(9px) rotate(22.5deg)50%transform:translateY(18px) scale(1,.9) rotate(45deg);border-bottom-right-radius:40px75%transform:translateY(9px) rotate(67.5deg)100%transform:translateY(0) rotate(90deg)#shadowwidth:50px;height:5px;background:#000;opacity:0.1;position:absolute;top:59px;left:0;border-radius:50%;animation:shadow .5s linear infinite@keyframes shadow50%transform:scale(1.2,1)</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#DB7769;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loaderanimation:loader 5s cubic-bezier(.8,0,.2,1) infinite;height:40px;width:41px;position:absolute;top:calc(50% - 20px);left:calc(50% - 20px)@keyframes loader90%transform:rotate(0deg)100%transform:rotate(180deg)#topanimation: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 top90%transform:scale(0)100%transform:scale(0)#bottomanimation: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 bottom10%transform:scale(0)90%transform:scale(1)100%transform:scale(1)#lineanimation:line 5s linear infinite;border-left:1px dotted #fff;height:0;width:0;position:absolute;top:20px;left:20px@keyframes line10%height:20px100%height:20px</style>
Efek Animasi Loading:
Spring Line
HTML<div id='preloader'><div id='container' class='spinner'> <div id='loader'></div> </div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#containerwidth:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)#loaderwidth: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 rotate0%border-width:10px25%border-width:3px50%transform:rotate(115deg);border-width:10px75%border-width:3px100%border-width:10px</style>
Efek Animasi Loading:
Square Loader
HTML<div id='preloader'><div class='spinner'><span class='loader'><span class='loader-inner'></span></span></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerlist-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%).loaderdisplay:inline-block;width:30px;height:30px;position:relative;border:4px solid #0984e3;top:50%;animation:loader 2s infinite ease.loader-innervertical-align:top;display:inline-block;width:100%;background-color:#0984e3;animation:loader-inner 2s infinite ease-in@keyframes loader0%transform:rotate(0deg)25%transform:rotate(180deg)50%transform:rotate(180deg)75%transform:rotate(360deg)100%transform:rotate(360deg)@keyframes loader-inner0%height:0%25%height:0%50%height:100%75%height:100%100%height:0%</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.loaderposition:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px.loader > .dotposition: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 dot13%,97%width:160px;height:100px;margin-top:-50px;margin-left:-80px30%,36%width:80px;height:120px;margin-top:-60px;margin-left:-40px63%,69%width:40px;height:80px;margin-top:-40px;margin-left:-20px@keyframes dot23%,97%width:150px;height:90px;margin-top:-45px;margin-left:-75px30%,36%width:70px;height:96px;margin-top:-48px;margin-left:-35px63%,69%width:32px;height:60px;margin-top:-30px;margin-left:-16px@keyframes dot33%,97%width:40px;height:20px;margin-top:50px;margin-left:-20px30%,36%width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px63%,69%width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition: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 circleRotate0%transform:rotate(0deg)100%transform:rotate(1440deg).ball-1z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9).ball-2z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9).ball-3z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9).ball-4z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9).ball-5z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9).ball-6z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9).ball-7z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9).ball-8z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)</style>
Efek Animasi Loading:
8 Bit
HTML<div id='preloader'><div id='loader' class='spinner'></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loaderanimation:spin 1s linear infinite;height:10px;width:10px;position:absolute;top:50%;left:50%;margin:-5px@keyframes spin0%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 transparent6.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 transparent12.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 transparent18.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 transparent25%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 transparent31.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 transparent37.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 transparent43.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 transparent50%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 #00056.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 #00062.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 #00068.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 #00075%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 #00081.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 #00087.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 #00093.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 #000100%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>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition:absolute;top:50%;margin-left:-50px;left:50%;animation:speeder .4s linear infinite.spinner > spanheight:5px;width:35px;background:#000;position:absolute;top:-19px;left:60px;border-radius:2px 10px 1px 0.base spanposition:absolute;width:0;height:0;border-top:6px solid transparent;border-right:100px solid #000;border-bottom:6px solid transparent.base span:beforecontent:"";height:22px;width:22px;border-radius:50%;background:#000;position:absolute;right:-110px;top:-16px.base span:aftercontent:"";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.faceposition:absolute;height:12px;width:20px;background:#000;border-radius:20px 20px 0 0;transform:rotate(-40deg);right:-125px;top:-15px.face:aftercontent:"";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 fazer10%left:0100%left:-80px;opacity:0@keyframes fazer20%left:0100%left:-100px;opacity:0@keyframes fazer30%left:0100%left:-50px;opacity:0@keyframes fazer40%left:0100%left:-150px;opacity:0@keyframes speeder0%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).longfazersposition:absolute;width:100%;height:100%.longfazers spanposition: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 lf0%left:200%100%left:-200%;opacity:0@keyframes lf20%left:200%100%left:-200%;opacity:0@keyframes lf30%left:200%100%left:-100%;opacity:0@keyframes lf40%left:200%100%left:-100%;opacity:0</style>
Efek Animasi Loading:
Tron
HTML<div id='preloader'><div class='spinner'></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:radial-gradient(#1f3a47, #0b1114);left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition: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-wiggle30%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:aftercontent:"";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:beforeborder-top-color:#66e6ff.spinner:afterborder-top-color:#f0db75;animation-delay:0.3s@keyframes spinner-spin100%transform:rotate(360deg)@keyframes spinner-fade20%opacity:.140%opacity:160%opacity:.1</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999@keyframes preload-show-1fromtransform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-1totransform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-15%transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f10%,75%transform:rotateZ(60deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e80%,100%transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-show-2fromtransform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-2totransform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-210%transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f15%,70%transform:rotateZ(120deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e75%,100%transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-show-3fromtransform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-3totransform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-315%transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f20%,65%transform:rotateZ(180deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e70%,100%transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-show-4fromtransform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-4totransform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-420%transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f25%,60%transform:rotateZ(240deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e65%,100%transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-show-5fromtransform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-5totransform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-525%transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f30%,55%transform:rotateZ(300deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e60%,100%transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-show-6fromtransform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-hide-6totransform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-cycle-630%transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f35%,50%transform:rotateZ(360deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e55%,100%transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f@keyframes preload-flip0%transform:rotateY(0deg) rotateZ(-60deg)100%transform:rotateY(360deg) rotateZ(-60deg).preloaderposition: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 .sliceborder-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.loadinganimation: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>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#statuswidth:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px.spinnermargin:0 auto;width:50px;height:30px;text-align:center;font-size:10px.spinner > divbackground-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 stretchdelay0%,40%,100%-webkit-transform:scaleY(0.4)20%-webkit-transform:scaleY(1.0)@keyframes stretchdelay0%,40%,100%transform:scaleY(0.4);-webkit-transform:scaleY(0.4)20%transform:scaleY(1.0);-webkit-transform:scaleY(1.0)</style>
Efek Animasi Loading:
Circular
HTML<div id='preloader'><div id='loader'> <span class='spinner'></span></div></div>
CSS<style type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loaderposition: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 rotate0%transform:rotate(0deg)100%transform:rotate(360deg)</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinner > .preloader-boxposition:absolute;width:345px;height:30px;top:50%;left:50%;margin:-15px 0 0 -150px;-webkit-perspective:200px.spinner .preloader-box > divposition: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 movementfrom-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>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center.loaderheight:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto.moving-dotanimation-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-childbackground-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 loader15%transform:translateX(0)45%transform:translateX(230px)65%transform:translateX(230px)95%transform:translateX(0)</style>
Efek Animasi Loading:
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 type='text/css'>/* Preloader */#preloaderoverflow:hidden;background:#27ae60;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999#loadfont-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 divposition: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 move0%left:0;opacity:035%left:41%;transform:rotate(0deg);opacity:165%left:59%;transform:rotate(0deg);opacity:1100%left:100%;transform:rotate(-180deg);opacity:0</style>
Efek Animasi Loading:
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#preloaderoverflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999.spinnerposition:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center#loadingposition:absolute;left:calc(50% - 100px);top:calc(50% - 25px);z-index:9999.uil-rippleposition:absolute;left:calc(50% - 90px);top:calc(50% - 90px);opacity:.5;z-index:999.ld-lopacity:0;animation:ld-in 3s 0.0s ease infinite.ld-oopacity:0;animation:ld-in 3s 0.1s ease infinite.ld-aopacity:0;animation:ld-in 3s 0.2s ease infinite.ld-dopacity:0;animation:ld-in 3s 0.3s ease infinite.ld-iopacity:0;animation:ld-in 3s 0.4s ease infinite.ld-nopacity:0;animation:ld-in 3s 0.5s ease infinite.ld-gopacity:0;animation:ld-in 3s 0.6s ease infinite@keyframes ld-in0%opacity:0;transform:scale(0)30%opacity:1;transform:scale(1)100%opacity:1;transform:scale(1)
Penutup
Demikianlah panduan cara memasang pengaruh animasi pada loading blog, cara-cara diatas admin sampaikan secara detail serta terperinci guna memudahkan para pembaca pada mengetahui dan mengaplikasikan setiap langkahnya.
Perlu diperhatikan bahwa setiap kode yang aku gunakan pada artikel ini diambil secara langsung dari situs arlinadzgn.com. Jadi bila dirasa terdapat kesalahan pada penggunaan kode, kamu mampu mengunjungi situs sumber ini, guna mendapat informasi yg lebih lengkap.
Akhir celoteh aku ucapkan terimakasih, dan semoga artikel mengenai cara memasang impak animasi pada blog ini bisa bermanfaat bagi yg membutuhkan ya. Terus kunjungi situs blog ini, buat mendapatkan informasi terbaru.
