{"id":1059,"date":"2025-07-21T04:14:14","date_gmt":"2025-07-21T04:14:14","guid":{"rendered":"https:\/\/sertifikasidigital.id\/blog\/?p=1059"},"modified":"2025-07-21T04:14:16","modified_gmt":"2025-07-21T04:14:16","slug":"cara-buat-animasi-loading-di-web-dengan-css-dan-javascript","status":"publish","type":"post","link":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/","title":{"rendered":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript"},"content":{"rendered":"\n<p>Animasi loading merupakan elemen visual penting dalam desain web modern untuk menjaga pengalaman pengguna tetap positif selama proses pemuatan halaman. <\/p>\n\n\n\n<p>Artikel ini membahas pengertian animasi loading, fungsinya dalam antarmuka web, contoh penggunaannya, cara membuatnya, serta penutup sebagai rangkuman.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 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:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#Pengertian_Animasi_Loading_di_Web\" >Pengertian Animasi Loading di Web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#Fungsi_Animasi_Loading\" >Fungsi Animasi Loading<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#1_Meningkatkan_Pengalaman_Pengguna_User_Experience\" >1. Meningkatkan Pengalaman Pengguna (User Experience)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#2_Mengurangi_Tingkat_Bounce_Rate\" >2. Mengurangi Tingkat Bounce Rate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#3_Membangun_Identitas_Visual\" >3. Membangun Identitas Visual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#4_Mengarahkan_Fokus_Pengguna\" >4. Mengarahkan Fokus Pengguna<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#Contoh_Animasi_Loading\" >Contoh Animasi Loading<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#Cara_Membuat_Animasi_Loading_di_Web\" >Cara 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-9\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#1_Menggunakan_CSS\" >1. Menggunakan CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#2_Menggunakan_JavaScript\" >2. Menggunakan JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#3_Menggunakan_Library_atau_Framework\" >3. Menggunakan Library atau Framework<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengertian_Animasi_Loading_di_Web\"><\/span>Pengertian Animasi Loading di Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Animasi loading adalah elemen grafis yang muncul saat halaman web atau konten sedang dimuat. <\/p>\n\n\n\n<p>Tujuannya adalah untuk memberi tahu pengguna bahwa sistem sedang bekerja, serta mengurangi persepsi waktu tunggu. Animasi ini bisa berupa spinner, progress bar, ikon bergerak, atau efek transisi visual lainnya.<\/p>\n\n\n\n<p>Animasi loading biasanya digunakan pada aplikasi web, situs e-commerce, dashboard admin, atau situs berbasis JavaScript yang memiliki proses backend cukup berat.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga : <a href=\"https:\/\/sertifikasidigital.id\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fungsi_Animasi_Loading\"><\/span>Fungsi Animasi Loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Meningkatkan_Pengalaman_Pengguna_User_Experience\"><\/span>1. Meningkatkan Pengalaman Pengguna (User Experience)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Animasi loading memberikan feedback visual yang membuat pengguna merasa halaman tidak mengalami error atau lag.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Mengurangi_Tingkat_Bounce_Rate\"><\/span>2. Mengurangi Tingkat Bounce Rate<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Jika pengguna tidak melihat respons dari sistem, mereka cenderung meninggalkan halaman. Animasi loading menjaga perhatian mereka tetap terfokus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Membangun_Identitas_Visual\"><\/span>3. Membangun Identitas Visual<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Animasi loading bisa disesuaikan dengan karakter brand, memberi kesan profesional dan kreatif.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Mengarahkan_Fokus_Pengguna\"><\/span>4. Mengarahkan Fokus Pengguna<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Saat loading terjadi, Anda bisa memanfaatkan waktu itu untuk menampilkan pesan, tips, atau logo, sehingga tetap ada nilai yang tersampaikan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contoh_Animasi_Loading\"><\/span>Contoh Animasi Loading<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Spinner:<\/strong> Lingkaran berputar (umum digunakan di aplikasi dan dashboard)<\/li>\n\n\n\n<li><strong>Progress Bar:<\/strong> Batang horizontal yang bergerak menunjukkan progres loading<\/li>\n\n\n\n<li><strong>Dot Animation:<\/strong> Titik-titik yang muncul dan hilang secara berulang<\/li>\n\n\n\n<li><strong>Custom Illustration:<\/strong> Karakter bergerak atau animasi brand khusus<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Animasi_Loading_di_Web\"><\/span>Cara Membuat Animasi Loading di Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menggunakan_CSS\"><\/span>1. Menggunakan CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Contoh membuat spinner dengan CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"loader\"&gt;&lt;\/div&gt;\n&lt;style&gt;\n.loader {\n  border: 8px solid #f3f3f3;\n  border-top: 8px solid #3498db;\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Menggunakan_JavaScript\"><\/span>2. Menggunakan JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Tampilkan dan sembunyikan loader dengan JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n  window.addEventListener(\"load\", function() {\n    document.querySelector(\".loader\").style.display = \"none\";\n  });\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Menggunakan_Library_atau_Framework\"><\/span>3. Menggunakan Library atau Framework<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan library seperti <strong>Lottie<\/strong>, <strong>React Spinners<\/strong>, atau plugin jQuery untuk membuat animasi yang lebih kompleks dan interaktif.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Animasi loading bukan sekadar elemen dekoratif, melainkan bagian penting dari antarmuka pengguna yang berdampak langsung pada kepuasan dan kesan pengguna. <\/p>\n\n\n\n<p>Dengan membuat animasi loading yang tepat dan responsif, Anda bisa meningkatkan kualitas interaksi di situs web Anda. Pastikan animasi tidak memperlambat performa dan tetap selaras dengan identitas visual brand Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animasi loading merupakan elemen visual penting dalam desain web modern untuk menjaga pengalaman pengguna tetap positif selama proses pemuatan halaman. Artikel ini membahas pengertian animasi loading, fungsinya dalam antarmuka web, contoh penggunaannya, cara membuatnya, serta penutup sebagai rangkuman. Pengertian Animasi Loading di Web Animasi loading adalah elemen grafis yang muncul saat halaman web atau konten&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1060,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[35],"tags":[230,232,231],"class_list":["post-1059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-animasi-loading-web","tag-loading-screen-html","tag-spinner-css","article","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","has-title","has-post-media","thumbnail-"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa<\/title>\n<meta name=\"description\" content=\"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa\" \/>\n<meta property=\"og:description\" content=\"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Tingkatkan Kepercayaan Setinggi Angkasa\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-21T04:14:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-21T04:14:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/person\/1a326b40b58897988b847715d35a52a1\"},\"headline\":\"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript\",\"datePublished\":\"2025-07-21T04:14:14+00:00\",\"dateModified\":\"2025-07-21T04:14:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\"},\"wordCount\":336,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png\",\"keywords\":[\"animasi loading web\",\"loading screen html\",\"spinner css\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\",\"url\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\",\"name\":\"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa\",\"isPartOf\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png\",\"datePublished\":\"2025-07-21T04:14:14+00:00\",\"dateModified\":\"2025-07-21T04:14:16+00:00\",\"description\":\"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.\",\"breadcrumb\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage\",\"url\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png\",\"contentUrl\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sertifikasidigital.id\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#website\",\"url\":\"https:\/\/sertifikasidigital.id\/blog\/\",\"name\":\"Tingkatkan Kepercayaan Setinggi Angkasa\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sertifikasidigital.id\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#organization\",\"name\":\"Tingkatkan Kepercayaan Setinggi Angkasa\",\"url\":\"https:\/\/sertifikasidigital.id\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/06\/Logo-Kompetitor-Ditekindo-Transparan-08-1-scaled.png\",\"contentUrl\":\"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/06\/Logo-Kompetitor-Ditekindo-Transparan-08-1-scaled.png\",\"width\":2560,\"height\":948,\"caption\":\"Tingkatkan Kepercayaan Setinggi Angkasa\"},\"image\":{\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/person\/1a326b40b58897988b847715d35a52a1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sertifikasidigital.id\/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:\/\/sertifikasidigital.id\"],\"url\":\"https:\/\/sertifikasidigital.id\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa","description":"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.","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:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa","og_description":"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.","og_url":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/","og_site_name":"Tingkatkan Kepercayaan Setinggi Angkasa","article_published_time":"2025-07-21T04:14:14+00:00","article_modified_time":"2025-07-21T04:14:16+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#article","isPartOf":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/"},"author":{"name":"admin","@id":"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/person\/1a326b40b58897988b847715d35a52a1"},"headline":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript","datePublished":"2025-07-21T04:14:14+00:00","dateModified":"2025-07-21T04:14:16+00:00","mainEntityOfPage":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/"},"wordCount":336,"commentCount":0,"publisher":{"@id":"https:\/\/sertifikasidigital.id\/blog\/#organization"},"image":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png","keywords":["animasi loading web","loading screen html","spinner css"],"articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/","url":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/","name":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript - Tingkatkan Kepercayaan Setinggi Angkasa","isPartOf":{"@id":"https:\/\/sertifikasidigital.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage"},"image":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png","datePublished":"2025-07-21T04:14:14+00:00","dateModified":"2025-07-21T04:14:16+00:00","description":"Pelajari cara membuat animasi loading di web menggunakan CSS dan JavaScript. Panduan lengkap dengan contoh dan manfaatnya.","breadcrumb":{"@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#primaryimage","url":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png","contentUrl":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/07\/Sertifikasi-Digital-36.png","width":600,"height":400,"caption":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/sertifikasidigital.id\/blog\/cara-buat-animasi-loading-di-web-dengan-css-dan-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sertifikasidigital.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Buat Animasi Loading di Web dengan CSS dan JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/sertifikasidigital.id\/blog\/#website","url":"https:\/\/sertifikasidigital.id\/blog\/","name":"Tingkatkan Kepercayaan Setinggi Angkasa","description":"","publisher":{"@id":"https:\/\/sertifikasidigital.id\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sertifikasidigital.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sertifikasidigital.id\/blog\/#organization","name":"Tingkatkan Kepercayaan Setinggi Angkasa","url":"https:\/\/sertifikasidigital.id\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/06\/Logo-Kompetitor-Ditekindo-Transparan-08-1-scaled.png","contentUrl":"https:\/\/sertifikasidigital.id\/blog\/wp-content\/uploads\/2025\/06\/Logo-Kompetitor-Ditekindo-Transparan-08-1-scaled.png","width":2560,"height":948,"caption":"Tingkatkan Kepercayaan Setinggi Angkasa"},"image":{"@id":"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sertifikasidigital.id\/blog\/#\/schema\/person\/1a326b40b58897988b847715d35a52a1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sertifikasidigital.id\/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:\/\/sertifikasidigital.id"],"url":"https:\/\/sertifikasidigital.id\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/posts\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":1,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"predecessor-version":[{"id":1061,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/posts\/1059\/revisions\/1061"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/media\/1060"}],"wp:attachment":[{"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sertifikasidigital.id\/blog\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}