Membuat Tombol Demo Dan Download Material Design

Membuat Tombol Demo Dan Download Material Design

CSS HTML jQuery Tips Blogger

Membuat Tombol Demo dan Download Material Design - Seperti yang kita ketahui, sekarang Material Design sudah menjadi tren sebagai antarmuka web atau UI (User Interface) baik itu pada perangkat mobile maupun desktop dalam sebuah halaman website. Antarmuka web ini pun disambut baik oleh pengguna maupun pengembang website alasannya ialah mempunyai segudang fitur yang bermanfaat serta tampilan yang lebih menarik.

Pada kesempatan ini akan menawarkan pola tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada dikala kita menekan tombol tersebut yang merupakan salah satu fitur menyerupai efek animasi dari Material Design.

Membuat Tombol Demo dan Download Material Design

Pertama Buka Blogger > Klik tombol Edit HTML > Template Editor > Tambahkan CSS di bawah ini sebelum isyarat ]]></b:skin> atau </style>

/*  Material Button */ #wrap{margin:20px auto;text-align:center} #wrap a{text-decoration:none} .tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s} .tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)} .tombolripple.tsatu{background:#e67e22} .tombolripple.tdua{background:#3498db} .tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541} .tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3} svg{position:absolute;top:0;left:0;width:100%;height:100%} circle{fill:rgba(255,255,255,0.07)} .ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)} .teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5} .teffect.animate{animation:ripple-effect 0.5s linear} @keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}} @-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

Untuk warna tombol dan fungsi lainnya dapat teman sesuaikan kembali

Kemudian tambahkan isyarat jQuery ini sebelum isyarat </body>

<script type='text/javascript'> //<![CDATA[ !function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery); //]]> </script>

Kode jQuery berfungsi untuk memunculkan efek Ripple pada tombol

lalu simpan template.

Sekarang untuk isyarat pemanggilnya, tambahkan isyarat HTML di bawah ini di dalam postingan pada tab HTML (bukan compose)

<div id="wrap">   <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>   <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a> </div>

Tambahkan link tujuan pada isyarat yang ditandai

Selesai! Dan lihat hasilnya

See the Pen Tombol dengan Efek Ripple by (@arlinadesign) on CodePen.

Bukan hanya pada tombol, efek ripple diatas dapat teman tambahkan pada tag apapun di bab markup template lain. Sobat hanya perlu menambahkan ripple-effect di dalam class dalam suatu tag menyerupai pola di bawah ini

See the Pen Contoh Efek Ripple Pada Tag Tertentu by (@arlinadesign) on CodePen.

Sobat hanya perlu menawarkan tag CSS overflow:hidden dan position:relative pada tag pembungkusnya

#wrapper{position:relative;overflow:hidden} #wrapper .child{......}

<div id="wrapper">   <span class="child ripple-effect" >Contoh</span> </div>

Demikian tutorial ihwal cara Membuat Tombol Demo dan Download Material Design. Semoga bermanfaat.


Sumber http://arlinadesign.blogspot.com

Cara Menciptakan Judul Blog Muncul Satu Kata

Cara Menciptakan Judul Blog Muncul Satu Kata

jQuery Tips Blogger

Kali ini akan memperlihatkan tips Cara Membuat Judul Blog Muncul Satu Kata. Tips ini bekerja bila teman ingin memotong atau menyembunyikan judul blog yang terlalu panjang dan hanya satu kata pertama saja dari judul blog yang ingin dimunculkan.

Seperti pola misalkan judul blog teman yaitu Tutorial Blogger 2017, maka dengan trik ini akan otomatis memotong judul blog menjadi Tutorial saja. Meskipun judul blog panjang semoga terlihat rapi dapat diatasi dengan mengganti judul dengan logo, namun tidak ada salahnya untuk mencoba cara lain menyerupai yang akan aku berikan berikut ini.

Cara Membuat Judul Blog Muncul Satu Kata

Pertama buka Blogger > Tema > Klik tombol Edit HTML > dan tambahkan arahan di bawah ini sempurna sebelum arahan epilog head menyerupai ini </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; sesuai dengan versi tema blog yang teman gunakan.

<script type='text/javascript'> $(document).ready(function(){var e=$("body").find("#header .title a").eq(0).text().split(" ");$("body").find("#header .title a").eq(0).text(e[0])}); </script>

Perhatikan arahan yang ditandai, sesuaikan kembali dengan ID atau class pada HTML Header tema yang teman gunakan. Setelah itu klik Simpan tema.

Cukup gampang bukan? Semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Syntax Highlighter Di Postingan Blog

Cara Memasang Syntax Highlighter Di Postingan Blog

CSS HTML Javascript jQuery Tips Blogger

Selain mempercantik tampilan barisan instruksi di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca semoga sanggup dengan gampang mengenali jenis instruksi yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi penulis atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Syntax Highlighter merupakan fitur khusus sebuah proses pemindahan instruksi bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah instruksi bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk goresan pena lain semoga lebih gampang dalam membaca atau mempelajarinya.

Syntax Highlighter cara kerjanya hampir sama dengan blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan instruksi aslinya harus dilakukan secara manual. Kaprikornus pada dasarnya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Nah, di sini akan memperlihatkan tutorial Cara Memasang Syntax Highlighter di Postingan ibarat pada blog ini, mari kita lanjutkan ke cara penambahannya.

Cara Memasang Syntax Highlighter di Dalam Tema

Pertama, login ke Blogger > Pilih Blog > Klik sajian Tema dan klik tombol Edit HTML > Tambahkan instruksi CSS di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Perhatikan, instruksi yang akan saya bagikan ini akan berfungsi dengan baik kalau di blognya sudah menambahkan jquery library. Contoh jquery library ibarat ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<style type='text/css'> /* Highlighter */ pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem} .post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0} </style>

Kemudian tambahkan instruksi berikut ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'> //<![CDATA[ // Highlighter $('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>

Setelah itu klik tombol Simpan tema.

Cara Penulisan Syntax Highlighter di Postingan Blog

Setelah memasang instruksi yang dibutuhkan, selanjutnya ke cara penulisannya di dalam postingan. Buat postingan gres di blog sobat, lalu untuk penulisannya tambahkan instruksi ini di tab HTML (bukan compose)

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti instruksi yang ditandai pada instruksi di atas dengan instruksi CSS/HTML/JAVASCRIPT. Khusus untuk instruksi HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Converter.

Berikut pola penulisan instruksi HTML, instruksi HTML yang ditandai yaitu instruksi yang akan sahabat tambahkan.

<pre><code><h1>   <span>a</span>   <span>r</span>   <span>l</span>   <span>i</span>   <span>n</span>   <span>a</span> </br>   <span>d</span>   <span>e</span>   <span>s</span>   <span>i</span>   <span>g</span>   <span>n</span> </h1></code></pre>

Sama halnya dengan instruksi CSS dan Javascript, cara penulisannya sama ibarat pola di atas.

Baiklah, demikian untuk tips kali ini perihal Cara Memasang Syntax Highlighter di Postingan Blog. Semoga bermanfaat dan wassalam.

Sumber : https://github.com/isagalaev/highlight.js
Sumber http://arlinadesign.blogspot.com

Memasang Dampak Preloading Keren Di Blogger

Memasang Dampak Preloading Keren Di Blogger

CSS HTML jQuery Tips Blogger

Ada banyak cara perjuangan untuk mempercantik blog, salah satunya dengan Memasang Efek Preloading Keren di Blogger ini. Bagi yang penasaran, simak tipsnya di bawah ini.

Cara kerja dari Efek Preloading di Blogger ini adalah transisi yang akan muncul otomatis ketika memuat halaman di blog dan akan hilang sesudah halaman tersebut termuat dengan penuh. Efek Preloading yang akan aku bagikan ini tidak akan mempengaruhi kecepatan blog sebab sangat ringan murni CSS dan SVG tanpa gambar. Sebelumnya aku juga pernah membuatkan postingan terkait di sini Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat. Berikut tips Cara Memasang Efek Preloading

Memasang Efek Preloading Keren di Blogger

Sebelum menambahkan isyarat yang akan aku bagikan ini, isyarat akan berjalan dengan baik pada jQuery library versi 1.7.1

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

Silakan ganti jQuery library yang sudah ada pada blog sahabat dengan versi di atas.

Buka Blogger > Tema > Klik tombol Edit HTML > Tambahkan isyarat ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

jQuery

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

Kemudian tambahkan isyarat ini sempurna di bawah <body>

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>

Selanjutnya tambahkan isyarat CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

CSS

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

Setelah itu klik tombol Simpan tema dan lihat hasilnya.

See the Pen Memasang Efek Preloading Keren di Blogger by (@arlinadesign) on CodePen.

Opsi lain Animasi Preloading

Dan di sini aku juga telah menyediakan beberapa pilihan HTML dan CSS untuk imbas animasi preloading yang dapat sahabat sesuaikan dengan kebutuhan.

Bounce Dot

See the Pen Bounce Dot by (@arlinadesign) on CodePen.

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

Pacman

See the Pen Pacman by (@arlinadesign) on CodePen.

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

Square

See the Pen Square Loader by (@arlinadesign) on CodePen.

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

Running Dot

See the Pen Running Dots by (@arlinadesign) on CodePen.

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

See the Pen Circle by (@arlinadesign) on CodePen.

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

See the Pen Reversed Dot by (@arlinadesign) on CodePen.

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

See the Pen Jelly Box by (@arlinadesign) on CodePen.

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

See the Pen Hourglass by (@arlinadesign) on CodePen.

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

See the Pen Spring Line by (@arlinadesign) on CodePen.

HTML

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

CSS

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

Square Loader

See the Pen Square Loader by (@arlinadesign) on CodePen.

HTML

<div id='preloader'> <div class='spinner'> <span class='loader'><span class='loader-inner'></span></span> </div> </div>

CSS

<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%)} .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>

Tech Loader

See the Pen Tech Loader by (@arlinadesign) on CodePen.

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

Spinner Ball

See the Pen Spinner Ball by (@arlinadesign) on CodePen.

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

8 Bit

See the Pen 8 Bit by (@arlinadesign) on CodePen.

HTML

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

CSS

<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

See the Pen Swift by (@arlinadesign) on CodePen.

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

See the Pen Tron by (@arlinadesign) on CodePen.

HTML

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

CSS

<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

See the Pen Google Chrome by (@arlinadesign) on CodePen.

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

See the Pen Hexagon by (@arlinadesign) on CodePen.

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

See the Pen Old Facebook by (@arlinadesign) on CodePen.

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

See the Pen Circular by (@arlinadesign) on CodePen.

HTML

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

CSS

<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

See the Pen Perspective by (@arlinadesign) on CodePen.

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

See the Pen Moving Dot by (@arlinadesign) on CodePen.

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

See the Pen Flying Letter by (@arlinadesign) on CodePen.

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

See the Pen SVG Animation by (@arlinadesign) on CodePen.

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>

CSS

#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center} #loading{position:absolute;left:calc(50% - 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)}}

Demikian Cara Memasang Efek Preloading Keren di Blogger. Semoga bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com

Cara Menciptakan Table Of Contents Di Postingan Blogger

Cara Menciptakan Table Of Contents Di Postingan Blogger

CSS HTML Javascript jQuery Tips Blogger

Table of Contents ialah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents sanggup kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk menentukan warta bab pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan sesudah goresan pena kata pengantar atau wangsit pokok dari sebuah artikel.

Baiklah, di sini akan menunjukkan tips perihal bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.

Cara Membuat Table of Contents di Postingan Blogger

Untuk membuatnya silakan teman ikuti langkah-langkah berikut ini.

Buka Blogger > Klik sajian Tema > Klik tombol Edit HTML > Kemudian tambahkan arahan CSS ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'> /* CSS Table of Contents */ #light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px} #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden} </style>

Langkah selanjutnya, tambahkan arahan di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>           //<![CDATA[           $(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})}); //]]>           </script>

Klik tombol Simpan tema.

Selanjutnya ke bab postingan, buat postingan di editor post blogger. Tambahkan arahan di bawah ini pada tab HTML (bukan Compose)

<div id="light-toc"> <div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div> <div id="toc"> <ol> <li><a href="#toc_1" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 1</a></li> <li><a href="#toc_2" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 2</a></li> <li><a href="#toc_3" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 3</a></li> <li><a href="#toc_4" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 4</a></li> <li><a href="#toc_5" title="Cara Membuat Table of Contents di Postingan Blogger">Bagian Subheading 5</a></li> </ol> </div> </div>

Edit goresan pena yang ditandai dengan goresan pena sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada arahan di atas. Misalnya menyerupai ini

<h4> Cara Membuat Table of Contents di Postingan Blogger</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tambahkan ID pada heading menjadi menyerupai ini

<h4 id="toc_1"> Cara Membuat Table of Contents di Postingan Blogger</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Perhatikan arahan yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang teman buat. Contohnya

<h4 id="toc_1"> Heading Bagian 1</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_2"> Heading Bagian 2</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_3"> Heading Bagian 3</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_4"> Heading Bagian 4</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <h4 id="toc_5"> Heading Bagian 5</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Kemudian tambahkan arahan ini di setiap final paragraf tiap bagian

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>

Maka akhirnya menjadi menyerupai ini

<h4 id="toc_1"> Heading Bagian 1</h4>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  <div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0"> Back to Content</div>

Setelah selesai, silakan klik tombol Publikasikan post dan lihat akhirnya di blog sobat.

• Result

Dan ini referensi Table of Contents yang sudah aku tambahkan pada template blog

• Result

Demikian tips Cara Membuat Table of Contents di Postingan Blogger, biar bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com