{"id":13119,"date":"2024-02-16T09:57:38","date_gmt":"2024-02-16T09:57:38","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=13119"},"modified":"2024-02-23T15:31:03","modified_gmt":"2024-02-23T15:31:03","slug":"belajar-html-css-membuat-text-ring-loading-animation","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/","title":{"rendered":"Belajar HTML CSS : Membuat Text Ring Loading Animation"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pada video tutorial kali ini, kita akan belajar bagaimana membuat text ring loading animation.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Belajar HTML CSS : Membuat Text Ring Loading Animation\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/6QeD40BC8Js?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Pada video tutorial kali ini, kita akan belajar bagaimana membuat text ring loading animation.<\/p>\n","protected":false},"author":15,"featured_media":13121,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4840,4837,4839,4841,4842,4838],"class_list":["post-13119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-web-design-membuat-text-ring-loading-animation","tag-belajar-web-design-membuat-text-ring-loading-animation-pemula","tag-kursus-web-design-membuat-text-ring-loading-animation-bandung","tag-kursus-web-design-membuat-text-ring-loading-animation-jakarta","tag-tutorial-web-design-membuat-text-ring-loading-animation","tag-tutorial-web-design-membuat-text-ring-loading-animation-pemula"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Belajar HTML CSS : Membuat Text Ring Loading Animation - 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\/belajar-html-css-membuat-text-ring-loading-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML CSS : Membuat Text Ring Loading Animation - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Pada video tutorial kali ini, kita akan belajar bagaimana membuat text ring loading animation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-16T09:57:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-23T15:31:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"Belajar HTML CSS : Membuat Text Ring Loading Animation\",\"datePublished\":\"2024-02-16T09:57:38+00:00\",\"dateModified\":\"2024-02-23T15:31:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/\"},\"wordCount\":31,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/loadingringanimation.jpg\",\"keywords\":[\"Belajar Web Design Membuat Text Ring Loading Animation\",\"Belajar Web Design Membuat Text Ring Loading Animation Pemula\",\"Kursus Web Design Membuat Text Ring Loading Animation Bandung\",\"Kursus Web Design Membuat Text Ring Loading Animation Jakarta\",\"Tutorial Web Design Membuat Text Ring Loading Animation\",\"Tutorial Web Design Membuat Text Ring Loading Animation Pemula\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/\",\"name\":\"Belajar HTML CSS : Membuat Text Ring Loading Animation - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/loadingringanimation.jpg\",\"datePublished\":\"2024-02-16T09:57:38+00:00\",\"dateModified\":\"2024-02-23T15:31:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/loadingringanimation.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/loadingringanimation.jpg\",\"width\":\"750\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-html-css-membuat-text-ring-loading-animation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar HTML CSS : Membuat Text Ring Loading Animation\"}]},{\"@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\\\/c14789b713aefdff4189815a3655a941\",\"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\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar HTML CSS : Membuat Text Ring Loading Animation - 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\/belajar-html-css-membuat-text-ring-loading-animation\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML CSS : Membuat Text Ring Loading Animation - WebHozz Blog","og_description":"Pada video tutorial kali ini, kita akan belajar bagaimana membuat text ring loading animation.","og_url":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/","og_site_name":"WebHozz Blog","article_published_time":"2024-02-16T09:57:38+00:00","article_modified_time":"2024-02-23T15:31:03+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"Belajar HTML CSS : Membuat Text Ring Loading Animation","datePublished":"2024-02-16T09:57:38+00:00","dateModified":"2024-02-23T15:31:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/"},"wordCount":31,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg","keywords":["Belajar Web Design Membuat Text Ring Loading Animation","Belajar Web Design Membuat Text Ring Loading Animation Pemula","Kursus Web Design Membuat Text Ring Loading Animation Bandung","Kursus Web Design Membuat Text Ring Loading Animation Jakarta","Tutorial Web Design Membuat Text Ring Loading Animation","Tutorial Web Design Membuat Text Ring Loading Animation Pemula"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/","url":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/","name":"Belajar HTML CSS : Membuat Text Ring Loading Animation - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg","datePublished":"2024-02-16T09:57:38+00:00","dateModified":"2024-02-23T15:31:03+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2024\/02\/loadingringanimation.jpg","width":"750","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/belajar-html-css-membuat-text-ring-loading-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar HTML CSS : Membuat Text Ring Loading Animation"}]},{"@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\/c14789b713aefdff4189815a3655a941","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\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13119","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=13119"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13119\/revisions"}],"predecessor-version":[{"id":13129,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/13119\/revisions\/13129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/13121"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=13119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=13119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=13119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}