{"id":60,"date":"2023-09-26T07:22:03","date_gmt":"2023-09-26T07:22:03","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=60"},"modified":"2024-01-09T09:24:42","modified_gmt":"2024-01-09T09:24:42","slug":"how-to-change-the-preloaders","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-change-the-preloaders\/","title":{"rendered":"How to Change Pre-loaders in your Site?"},"content":{"rendered":"\n<p>Pre-loaders appear when your user performs certain type of action and the webpage starts to load. It is a buffering display animation that is displayed when loading resources in the website. So, in a way a Pre-loader are very important for user experience. <strong>Azure News Theme<\/strong> provides you with <strong>3 different<\/strong> options to change the loading animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Guide<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=72&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts at the relative time<\/em>.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">To go to Pre-loader option,<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress dashboard, then navigate to <strong>Appearance&gt;&gt;Customizer<\/strong><\/li>\n\n\n\n<li>Then go to <strong>General Settings, <\/strong>and then click on <strong>Pre-loader <\/strong>option in the list.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">To change the Pre-loaders<\/h2>\n\n\n\n<p>First of all, you have to<strong> toggle on <\/strong>the<strong> Enable Pre-loader <\/strong>to make changes. <strong>&nbsp;<\/strong><\/p>\n\n\n\n<p>There are three different options in the <strong>Azure News<\/strong> <strong>theme<\/strong> where you can change the <strong>Pre-loaders<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"245\" height=\"354\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-2.png\" alt=\"Preloaders in Azure News\" class=\"wp-image-63\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-2.png 245w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-2-208x300.png 208w\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" \/><\/figure><\/div>\n\n\n<p>As per the image, you will have three different options to choose from to customize your <strong>Pre-loader Layout. <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pre-loaders appear when your user performs certain type of action and the webpage starts to load. It is a buffering display animation that is displayed when loading resources in the website. So, in a way a Pre-loader are very important for user experience. Azure News Theme provides you with 3 different options to change the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-60","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":4,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":384,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/60\/revisions\/384"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}