{"id":1067,"date":"2014-09-22T11:05:33","date_gmt":"2014-09-22T11:05:33","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=1067"},"modified":"2019-06-25T14:18:15","modified_gmt":"2019-06-25T14:18:15","slug":"membuat-animasi-loading","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/","title":{"rendered":"Membuat Animasi Loading"},"content":{"rendered":"<p><a href=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif\"><img fetchpriority=\"high\" decoding=\"async\" class=\"size-full wp-image-1072 aligncenter\" src=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif\" alt=\"loading81\" width=\"300\" height=\"300\" \/><\/a><br \/>\nWebsite akan lebih menarik apabila saat pertama kali kita membukanya, muncul sebuah animasi loading. Animasi ini biasanya sering kita jumpai pada website yang lebih banyak gambar atau fotonya seperti website promosi film, website artis dan lain \u00a0&#8211; lain. akan tetapi animasi loading ini kurang pas jika diterapkan pada website yg memiliki akses cepat seperti misalnya website portal berita.<\/p>\n<p>Cara kerjanya adalah Dengan bantuan JQuery, Animasi loading akan muncul selama website masih dimuat dan menghilang ketika website sudah siap ditampilkan secara menyeluruh.<\/p>\n<p>Cara membuatnya bagaimana ? Silahkan ikuti langkah &#8211; langkah berikut :<\/p>\n<p><!--more--><\/p>\n<p>1.\u00a0Tambahkan kode HTML \u00a0Animasi Loading<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;loading&quot;&gt;\r\n\t&lt;ul id=&quot;spinners&quot;&gt;\r\n\t&lt;li class=&quot;active&quot; data-id=&quot;1&quot;&gt;\r\n\t\t&lt;div id=&quot;preloader_1&quot;&gt;\r\n  \t\t\t&lt;span&gt;&lt;\/span&gt;\r\n  \t\t\t&lt;span&gt;&lt;\/span&gt;\r\n  \t\t\t&lt;span&gt;&lt;\/span&gt;\r\n  \t\t\t&lt;span&gt;&lt;\/span&gt;\r\n  \t\t\t&lt;span&gt;&lt;\/span&gt;\r\n  \t\t&lt;\/div&gt;\r\n  \t&lt;\/li&gt;\r\n  &lt;\/ul&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>2.\u00a0Tambahkan kode CSS\u00a0 Animasi Loading<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n#preloader_1{\r\n            position: relative;\r\n            left: 0px;\r\n            top: 0px;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 9999;\r\n}\r\n<\/pre>\n<p>3. Tambahkan kode JavaScript yang menjalankan\u00a0Animasi Loading<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!-- jQuery Plugin --&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6\/jquery.min.js&quot;&gt;&lt;\/script&gt;\r\n\t \r\n\t&lt;!-- Preloader --&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\t\t$(window).load(function() { $(&quot;#loading&quot;).fadeOut(&quot;slow&quot;); })\r\n\t&lt;\/script&gt;\r\n<\/pre>\n<p><a href=\"http:\/\/uminurinayah.com\/demoanimasiloading\/test.html\">DEMO<\/a><\/p>\n<p><a href=\"http:\/\/uminurinayah.com\/demoanimasiloading\/index.html\">DEMO MACAM &#8211; MACAM ANIMASI LOADING<\/a><\/p>\n<p><a href=\"https:\/\/www.dropbox.com\/s\/cp5r6432321d4xp\/demoanimasiloading.zip?dl=0\">DOWNLOAD<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Website akan lebih menarik apabila saat pertama kali kita membukanya, muncul sebuah animasi loading. Animasi ini biasanya sering kita jumpai pada website yang lebih banyak<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[213,212,13,56,319,322,321,324,323,320,128],"class_list":["post-1067","post","type-post","status-publish","format-standard","hentry","category-belajar-web-design","tag-ajax","tag-animasi-loading","tag-belajar-website","tag-blog-website","tag-loading","tag-membuat-animasi-loading-dengan-css","tag-membuat-animasi-loading-dengan-html","tag-membuat-animasi-loading-dengan-javascript","tag-membuat-animasi-loading-dengan-jquery","tag-membuat-loading","tag-web-desain"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat Animasi Loading - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Animasi Loading - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Website akan lebih menarik apabila saat pertama kali kita membukanya, muncul sebuah animasi loading. Animasi ini biasanya sering kita jumpai pada website yang lebih banyak\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-22T11:05:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T14:18:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\"},\"headline\":\"Membuat Animasi Loading\",\"datePublished\":\"2014-09-22T11:05:33+00:00\",\"dateModified\":\"2019-06-25T14:18:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/\"},\"wordCount\":263,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/loading81.gif\",\"keywords\":[\"ajax\",\"animasi loading\",\"belajar website\",\"blog website\",\"loading\",\"membuat animasi loading dengan css\",\"membuat animasi loading dengan html\",\"membuat animasi loading dengan javascript\",\"membuat animasi loading dengan jquery\",\"membuat loading\",\"web desain\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/\",\"name\":\"Membuat Animasi Loading - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/loading81.gif\",\"datePublished\":\"2014-09-22T11:05:33+00:00\",\"dateModified\":\"2019-06-25T14:18:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/loading81.gif\",\"contentUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/loading81.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/membuat-animasi-loading\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Animasi Loading\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/putralucio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Animasi Loading - WebHozz Blog","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:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/","og_locale":"en_US","og_type":"article","og_title":"Membuat Animasi Loading - WebHozz Blog","og_description":"Website akan lebih menarik apabila saat pertama kali kita membukanya, muncul sebuah animasi loading. Animasi ini biasanya sering kita jumpai pada website yang lebih banyak","og_url":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/","og_site_name":"WebHozz Blog","article_published_time":"2014-09-22T11:05:33+00:00","article_modified_time":"2019-06-25T14:18:15+00:00","og_image":[{"width":300,"height":300,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea"},"headline":"Membuat Animasi Loading","datePublished":"2014-09-22T11:05:33+00:00","dateModified":"2019-06-25T14:18:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/"},"wordCount":263,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif","keywords":["ajax","animasi loading","belajar website","blog website","loading","membuat animasi loading dengan css","membuat animasi loading dengan html","membuat animasi loading dengan javascript","membuat animasi loading dengan jquery","membuat loading","web desain"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/","url":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/","name":"Membuat Animasi Loading - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif","datePublished":"2014-09-22T11:05:33+00:00","dateModified":"2019-06-25T14:18:15+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#primaryimage","url":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif","contentUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/09\/loading81.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/membuat-animasi-loading\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat Animasi Loading"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/putralucio\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1073,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1073"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}