Pasti teman pernah menjumpai blog yang dimana ketika teman membuka blog tersebut tapi di halaman tersebut menampilkan effek loading dan akan berhenti kalau halaman blog tersebut sudah simpulan memuat sepenuh nya. Dan model menyerupai itu biasa para teman blogger menyebut nya dengan Efek Preloading.
Dan pada kesempatan kali ini aku ingin membuatkan Cara memasang efek preloading di blog lengkap dengan 19 Efek Preloading Yang Keren. Dan efek preloading ini di jamin tidak menciptakan berat blog sobat. Efek preloading ini ringan alasannya ialah murni css.
Dari 19 efek preloading di bawah ini di jamin keren semua nya sob. Mungkin eksklusif saja kita mulai tutorial kali ini, ikuti langkah - langkah nya sebagai berikut.
Cara Memasang Efek Preloading Di Blog
Langkah pertama silahkan teman copy instruksi di bawah ini kemudian letakan instruksi tersebut di atas instruksi </body> pada template sobat. <script type='text/javascript'> //<![CDATA[ // Preloader $(window).bind("load",function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})}); //]]> </script> Dan selanjut nya teman tinggal Pilih salah satu yang sekira nya efek preloading di bawah ini cocok dengan tampilan blog teman masing - masing. Cara nya dengan copy instruksi CSS efek preloading di bawah ini dan letakan instruksi css tersebut di atas instruksi </head> di template sobat. Dan kalau instruksi css di bawah ini tidak ada instruksi menyerupai ini <style type='text/css'> berarti letakan instruksi css nya di atas instruksi </style>
Dan instruksi HTML nya letakan sempurna di bawah instruksi <body> pada template sobat.
19 Kumpulan Efek Preloading Yang Keren Di Blog
Spinner
HTML <div id='preloader'> <svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'> <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/> </svg> </div> <style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:calc(50% - 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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#55efc4;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{width:100px;height:40px;position:absolute;top:50%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:calc(50% - 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>Reversed Dot
HTML<div id='preloader'> <div class='spinner'> <ul class='loading reversed'> <li></li> <li></li> <li></li> </ul> </div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;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>Jelly Box
HTML<div id='preloader'> <div id='loader' class='spinner'> <div id='shadow'></div> <div id='box'></div> </div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:calc(50% - 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>Hourglass
HTML<div id='preloader'> <div id='loader' class='spinner'> <div id='top'></div> <div id='bottom'></div> <div id='line'></div> </div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#DB7769;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{animation:loader 5s cubic-bezier(.8,0,.2,1) infinite;height:40px;width:41px;position:absolute;top:calc(50% - 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>Spring Line
HTML<div id='preloader'> <div id='container' class='spinner'> <div id='loader'></div> </div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 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>8 Bit
HTML<div id='preloader'> <div id='loader' class='spinner'></div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{animation:spin 1s linear infinite;height:10px;width:10px;position:absolute;top:50%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fdcb6e;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:50%;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>Tron
HTML<div id='preloader'> <div class='spinner'></div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:radial-gradient(#1f3a47, #0b1114);left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:30%;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>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><style type='text/css'> /* 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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} @keyframes preload-show-1{from{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-hide-1{to{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}} @keyframes preload-cycle-1{5%{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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #status{width:50px;height:30px;position:fixed;left:50%;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>Circular
HTML<div id='preloader'> <div id='loader'> <span class='spinner'></span> </div> </div><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #loader{position:absolute;top:50%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner > .preloader-box{position:absolute;width:345px;height:30px;top:50%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} .loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto} .moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;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>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><style type='text/css'> /* Preloader */ #preloader{overflow:hidden;background:#27ae60;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #load{font-size:2rem;position:absolute;top:40%;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>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="http://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>#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)}}Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini. agar artikel ini dapat bermanfaat buat teman yang sedang mencari Kumpulan Efek Preloading Yang Keren Di Blog. Salam blogger!
Script By : Arlinadzgn
