Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF Dalam tutorial kita kali ini aku akan membuatkan sedikit wacana cara Membuat Animasi Loading Untuk Website Tanpa Menggunakan GIF, maksudnya tanpa memakai GIF disini yakni kita tidak memerlukan sebuah animasi yang sudah jadi (GIF) ataupun images-images lainnya yang dapat memberatkan spees loading sebuah website. Disini aku hanya akan memakai CSS dan HMTL untuk menciptakan Animasi Loading yang keren.
 |
| Gambar 0.1 |
Kode CSS dan HTML yang aku gunakan juga tidaklah terlalu panjang, dan kodenya pun dapat dibilang sederhana sehingga anda dapat gampang mengingat kodenya.
Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF
Untuk langkah pertama menyerupai biasa yaitu menyiapkan 2 buah file dengan format HTML dan CSS, disini aku telah menciptakan 2 file tersebut dengan nama Index.html dan Style.css, kedua file tersebut aku letakan dalam 1 folder biar tidak sulit saat proses pemanggilan dari HTML ke CSS.
 |
| Gambar 0.2 |
Langkah selanjutnya anda hanya perlu memasukan aba-aba HTML di bawah ini di dalam file Index.html, dan jangan lupa untuk save filenya.
<h1>LOADING WEBSITE RIZKI DESIGN</h1> <link rel="stylesheet" type="text/css" href="style.css"> <!-Loading 1 --> <div class="loader loader--style1" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/> <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/> </path> </svg> </div> <!-Loading 2 --> <div class="loader loader--style2" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/> </path> </svg> </div> <!-Loading 3 --> <div class="loader loader--style3" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/> </path> </svg> </div> <!-Loading 4 --> <div class="loader loader--style4" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="0" width="4" height="7" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="10" y="0" width="4" height="7" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="20" y="0" width="4" height="7" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> <!-Loading 5 --> <div class="loader loader--style5" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="0" width="4" height="10" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="10" y="0" width="4" height="10" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="20" y="0" width="4" height="10" fill="#333"> <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> <!-Loading 6 --> <div class="loader loader--style6" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="10" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="20" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> <!-Loading 7 --> <div class="loader loader--style7" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="0" width="4" height="20" fill="#333"> <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="7" y="0" width="4" height="20" fill="#333"> <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.2s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="14" y="0" width="4" height="20" fill="#333"> <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.4s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> <!-Loading 8 --> <div class="loader loader--style8" title="Membuat Animasi Loading Untuk Website Tanpa Mengunakan GIF"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2"> <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2"> <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2"> <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div> Langkah selanjutnya yakni memasukan aba-aba CSS di bawah ini ke dalam file Style.css, dan jangan lupa untuk save filenya juga.
body{ padding: 1em; background: #2B3134; color: #777; text-align: center; font-family: "Gill sans", sans-serif; width: 80%; margin: 0 auto; } h1{ margin: 1em 0; border-bottom: 1px dashed; padding-bottom: 1em; font-weight: lighter; } p{ font-style: italic; } .loader{ margin: 0 0 2em; height: 100px; width: 20%; text-align: center; padding: 1em; margin: 0 auto 1em; display: inline-block; vertical-align: top; } /* Set the color of the icon */ svg path, svg rect{ fill: #FF6700; } Setelah aba-aba HTML dan CSS di pasang, anda tinggal menjalankannya di Browser kesayangan anda. Untuk melihat demonya terlebih dahulu silahkan anda tekan tombol di atas.
Note: Bagikan artikel ini jiga berdasarkan anda menarik. Bagikan artikel ini kalau berdasarkan anda dapat membantu teman-teman anda yang sedang membutuhkan
