{"id":1475,"date":"2025-07-19T03:44:45","date_gmt":"2025-07-19T03:44:45","guid":{"rendered":"https:\/\/kompetendigital.com\/blog\/?p=1475"},"modified":"2025-07-19T03:44:45","modified_gmt":"2025-07-19T03:44:45","slug":"membuat-animasi-loading-di-web","status":"publish","type":"post","link":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/","title":{"rendered":"Membuat Animasi Loading di Web"},"content":{"rendered":"\n<p>Saat mengunjungi sebuah situs web, sering kali kita melihat animasi loading yang muncul ketika halaman sedang dimuat. Meskipun tampaknya sederhana, animasi loading memainkan peran penting dalam memberikan pengalaman pengguna yang lebih baik. Animasi ini memberi tahu pengunjung bahwa halaman web sedang diproses dan mereka perlu menunggu sebentar. Selain itu, animasi loading juga dapat memberikan kesan profesional dan menarik bagi tampilan situs web Anda.<\/p>\n\n\n\n<p>Jika Anda tertarik untuk membuat animasi loading di situs web Anda, panduan ini akan menunjukkan langkah-langkahnya dengan cara yang mudah dimengerti.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#Apa_Itu_Animasi_Loading_dan_Mengapa_Penting\" >Apa Itu Animasi Loading dan Mengapa Penting?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#Jenis-jenis_Animasi_Loading\" >Jenis-jenis Animasi Loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#Langkah-langkah_Membuat_Animasi_Loading_di_Web\" >Langkah-langkah Membuat Animasi Loading di Web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#1_Persiapkan_Struktur_HTML\" >1. Persiapkan Struktur HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#2_Desain_Animasi_Loading_dengan_CSS\" >2. Desain Animasi Loading dengan CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#3_Menyembunyikan_Animasi_Loading_Setelah_Halaman_Dimuat\" >3. Menyembunyikan Animasi Loading Setelah Halaman Dimuat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#4_Mengatur_Durasi_dan_Tampilan_Animasi\" >4. Mengatur Durasi dan Tampilan Animasi<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#Tips_untuk_Animasi_Loading_yang_Lebih_Baik\" >Tips untuk Animasi Loading yang Lebih Baik<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_Animasi_Loading_dan_Mengapa_Penting\"><\/span><strong>Apa Itu Animasi Loading dan Mengapa Penting?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-1024x683.jpg\" alt=\"Membuat Animasi Loading di Web\" class=\"wp-image-1159\" srcset=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-1024x683.jpg 1024w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-300x200.jpg 300w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-768x512.jpg 768w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-1536x1024.jpg 1536w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-2048x1365.jpg 2048w, https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/girl-troubled-solve-puzzle-standing-confused-pensive-tilt-head-frowning-scratch-head-as-thinking-standing-thoughtful-trying-make-tough-decision-find-solution-white-background-1-432x288.jpg 432w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Animasi loading adalah elemen visual yang digunakan untuk menunjukkan bahwa halaman web sedang memuat atau dalam proses. Animasi ini bisa bermacam-macam bentuknya, seperti lingkaran yang berputar (spinner), garis yang bergerak saat loading, atau animasi lain yang lebih kreatif sesuai kebutuhan.<\/p>\n\n\n\n<p>Mengapa animasi loading penting? Karena mereka memberikan pengunjung informasi tentang status proses pemuatan. Tanpa animasi loading, pengunjung mungkin merasa bingung atau frustrasi karena tidak tahu apakah halaman web sedang memuat atau jika ada masalah teknis. Animasi loading yang pas bisa bikin pengunjung merasa lebih tenang dan nggak bosan saat menunggu halaman terbuka.<\/p>\n\n\n\n<p>Animasi loading juga memberikan kesempatan untuk meningkatkan pengalaman pengguna (UX), yang penting untuk mempertahankan pengunjung tetap berada di situs Anda lebih lama.<\/p>\n\n\n\n<p>Ingin meningkatkan kredibilitas dan keahlianmu di dunia pengembangan web? Sertifikasi Web Developer bisa jadi langkah tepat untuk membuktikan kemampuanmu secara profesional. Dengan mengikuti program sertifikasi ini, kamu akan mempelajari berbagai keterampilan teknis seperti HTML, CSS, JavaScript, hingga framework modern yang banyak digunakan industri. Selain itu, sertifikasi ini juga bisa membuka peluang karier yang lebih luas di bidang teknologi. Pelajari lebih lanjut tentang <a href=\"https:\/\/kompetendigital.com\/blog\/contoh-soal-sertifikasi-web-developer\/\"><strong>Sertifikasi Web Developer<\/strong> <\/a>dan mulai bangun portofolio digitalmu sekarang!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jenis-jenis_Animasi_Loading\"><\/span><strong>Jenis-jenis Animasi Loading<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ada berbagai jenis animasi loading yang bisa Anda pilih, dan masing-masing memiliki karakteristik dan fungsinya sendiri. Berikut adalah beberapa jenis animasi loading yang sering digunakan di web:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Spinner (Putaran)<\/strong>: Ini adalah salah satu animasi loading yang paling umum, di mana sebuah elemen bergerak berputar untuk menandakan proses pemuatan sedang berlangsung.<\/li>\n\n\n\n<li><strong>Bar Loading<\/strong>: Animasi berbentuk garis horizontal yang bergerak dari kiri ke kanan, menunjukkan proses pemuatan halaman.<\/li>\n\n\n\n<li><strong>Animasi Kustom<\/strong>: Kamu bisa bikin animasi loading yang lebih menarik, misalnya logo \u00a0\u00a0\u00a0\u00a0\u00a0yang bergerak, elemen visual yang nyambung sama desain website-mu, atau ilustrasi yang seru buat dilihat.<\/li>\n<\/ol>\n\n\n\n<p>Sekarang, mari kita bahas langkah-langkah untuk membuat animasi loading sederhana di situs web Anda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Langkah-langkah_Membuat_Animasi_Loading_di_Web\"><\/span><strong>Langkah-langkah Membuat Animasi Loading di Web<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Membuat animasi loading di situs web tidak terlalu sulit. Anda bisa menggunakan HTML, CSS, dan sedikit JavaScript untuk menambahkannya ke halaman web Anda. Berikut adalah langkah-langkah dasar yang dapat Anda ikuti:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Persiapkan_Struktur_HTML\"><\/span><strong>1. Persiapkan Struktur HTML<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama adalah menyiapkan struktur HTML untuk elemen animasi loading. Biasanya, animasi loading akan ditampilkan di seluruh layar selama proses pemuatan halaman, dan konten utama akan muncul setelah pemuatan selesai.<\/p>\n\n\n\n<p>Pastikan kamu bikin elemen khusus buat animasi loading, misalnya pakai div atau elemen HTML lain yang bisa kamu atur sendiri tampilannya.Biasanya, animasi loading ini berada di luar bagian konten utama situs web dan akan disembunyikan begitu halaman selesai dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Desain_Animasi_Loading_dengan_CSS\"><\/span><strong>2. Desain Animasi Loading dengan CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Selanjutnya, Anda perlu menambahkan desain untuk animasi loading menggunakan CSS. Anda bisa membuat animasi dengan efek putaran menggunakan properti @keyframes di CSS.<\/p>\n\n\n\n<p>Untuk spinner, Anda bisa menambahkan gaya CSS yang akan membuat elemen tersebut berputar terus-menerus. Anda juga bisa menambahkan efek transparansi atau latar belakang semi-transparan di sekitar animasi untuk menutupi konten halaman sampai pemuatan selesai.<\/p>\n\n\n\n<p>Ada banyak teknik lain dalam CSS yang bisa digunakan untuk membuat animasi loading, tergantung pada jenis animasi yang Anda pilih (misalnya spinner, bar loading, atau animasi kustom).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Menyembunyikan_Animasi_Loading_Setelah_Halaman_Dimuat\"><\/span><strong>3. Menyembunyikan Animasi Loading Setelah Halaman Dimuat<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setelah membuat animasi loading dengan HTML dan CSS, langkah berikutnya adalah menambahkan logika untuk menyembunyikan animasi tersebut ketika halaman sudah sepenuhnya dimuat. Biasanya, ini dilakukan menggunakan JavaScript.<\/p>\n\n\n\n<p>Saat pengguna mengunjungi situs Anda, animasi loading akan muncul terlebih dahulu. Begitu proses pemuatan halaman selesai, animasi loading akan dihilangkan, dan konten utama situs akan muncul. Anda bisa menggunakan event listener JavaScript untuk memantau status pemuatan halaman dan menampilkan atau menyembunyikan elemen sesuai kebutuhan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Mengatur_Durasi_dan_Tampilan_Animasi\"><\/span><strong>4. Mengatur Durasi dan Tampilan Animasi<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Penting untuk mengatur durasi animasi loading agar tidak berlangsung terlalu lama. Jika animasi loading terlihat terlalu lama, pengunjung mungkin merasa frustrasi. Sebagai alternatif, jika pemuatan halaman memerlukan waktu yang lebih lama, pastikan animasi tetap terlihat menarik dan sesuai dengan desain situs web Anda.<\/p>\n\n\n\n<p>Durasi animasi biasanya tidak perlu lebih dari beberapa detik, tergantung pada ukuran dan kompleksitas halaman. Jika halaman memuat lebih cepat, animasi hanya akan muncul sebentar, memberikan kesan bahwa situs Anda responsif dan cepat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tips_untuk_Animasi_Loading_yang_Lebih_Baik\"><\/span><strong>Tips untuk Animasi Loading yang Lebih Baik<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum mengakhiri panduan ini, berikut beberapa tips tambahan agar animasi loading di situs web Anda lebih efektif dan menarik:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Durasi Animasi yang Tepat<\/strong>: Jangan biarkan animasi loading berlangsung terlalu lama. Pengunjung tidak suka menunggu terlalu lama. Pastikan waktu yang dibutuhkan untuk menampilkan animasi sebanding dengan waktu yang dibutuhkan untuk memuat halaman.<\/li>\n\n\n\n<li><strong>Desain yang Konsisten dengan Tema<\/strong>: Pastikan animasi loading Anda konsisten dengan desain keseluruhan situs. Jika situs Anda memiliki tema warna tertentu, pastikan warna animasi loading juga sesuai dengan tema tersebut.<\/li>\n\n\n\n<li><strong>Menggunakan Animasi yang Menarik<\/strong>: Jika animasi spinner terlihat terlalu sederhana, Anda bisa mencoba animasi loading yang lebih kreatif, seperti elemen visual yang menggambarkan logo atau karakter tertentu yang berhubungan dengan situs Anda.<\/li>\n\n\n\n<li><strong>Jangan Terlalu Mengganggu<\/strong>: Animasi loading harus cukup mencolok agar pengunjung tahu bahwa situs sedang dimuat, tetapi tidak boleh mengganggu pengalaman pengguna. Pastikan animasi tetap menyatu dengan desain keseluruhan dan tidak terlalu mencolok.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Membuat animasi loading di web adalah cara yang efektif untuk meningkatkan pengalaman pengguna, terutama jika halaman Anda membutuhkan waktu untuk dimuat. Dengan menggunakan HTML, CSS, dan JavaScript, Anda bisa membuat animasi loading yang sederhana namun menarik, seperti spinner, bar loading, atau animasi kustom.<\/p>\n\n\n\n<p>Jangan lupa untuk memperhatikan durasi animasi dan desainnya agar tetap memberikan pengalaman yang menyenangkan bagi pengunjung. Dengan mengikuti langkah-langkah di atas, Anda dapat menciptakan animasi loading yang tidak hanya fungsional tetapi juga meningkatkan kesan profesional situs web Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saat mengunjungi sebuah situs web, sering kali kita melihat animasi loading yang muncul ketika halaman sedang dimuat. Meskipun tampaknya sederhana, animasi loading memainkan peran penting dalam memberikan pengalaman pengguna yang&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[194],"class_list":["post-1475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-membuat-animasi-loading-di-web","article","has-background","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Membuat Animasi Loading di Web -<\/title>\n<meta name=\"description\" content=\"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Animasi Loading di Web -\" \/>\n<meta property=\"og:description\" content=\"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-19T03:44:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/\",\"url\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/\",\"name\":\"Membuat Animasi Loading di Web -\",\"isPartOf\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png\",\"datePublished\":\"2025-07-19T03:44:45+00:00\",\"author\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\"},\"description\":\"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!\",\"breadcrumb\":{\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage\",\"url\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png\",\"contentUrl\":\"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kompetendigital.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Animasi Loading di Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#website\",\"url\":\"https:\/\/kompetendigital.com\/blog\/\",\"name\":\"\",\"description\":\"Jadi Profesional Setinggi Langit\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/kompetendigital.com\"],\"url\":\"https:\/\/kompetendigital.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Animasi Loading di Web -","description":"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Animasi Loading di Web -","og_description":"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!","og_url":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/","article_published_time":"2025-07-19T03:44:45+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/","url":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/","name":"Membuat Animasi Loading di Web -","isPartOf":{"@id":"https:\/\/kompetendigital.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage"},"image":{"@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png","datePublished":"2025-07-19T03:44:45+00:00","author":{"@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4"},"description":"Yuk, pelajari cara Membuat Animasi Loading di Web supaya tampilan situs makin keren dan pengguna betah nunggu!","breadcrumb":{"@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#primaryimage","url":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png","contentUrl":"https:\/\/kompetendigital.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/kompetendigital.com\/blog\/membuat-animasi-loading-di-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kompetendigital.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Animasi Loading di Web"}]},{"@type":"WebSite","@id":"https:\/\/kompetendigital.com\/blog\/#website","url":"https:\/\/kompetendigital.com\/blog\/","name":"","description":"Jadi Profesional Setinggi Langit","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kompetendigital.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/793420f392d4b738adf327fe83e870c4","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kompetendigital.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/620de75cd82a4e61ac250270ac94d652ceae998e47a5c532726a07aafe1aa197?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/kompetendigital.com"],"url":"https:\/\/kompetendigital.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/comments?post=1475"}],"version-history":[{"count":1,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1475\/revisions"}],"predecessor-version":[{"id":1479,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/posts\/1475\/revisions\/1479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media\/1478"}],"wp:attachment":[{"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/media?parent=1475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/categories?post=1475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kompetendigital.com\/blog\/wp-json\/wp\/v2\/tags?post=1475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}