{"id":22,"date":"2025-04-30T04:33:52","date_gmt":"2025-04-30T04:33:52","guid":{"rendered":"https:\/\/docs.mysterythemes.com\/blogbuster\/?p=22"},"modified":"2025-05-30T10:37:50","modified_gmt":"2025-05-30T10:37:50","slug":"customize-sites-preloader","status":"publish","type":"post","link":"https:\/\/docs.mysterythemes.com\/blogbuster\/customize-sites-preloader\/","title":{"rendered":"Customize site&#8217;s Preloaders with Blogbuster"},"content":{"rendered":"\n<p>A preloader is an animated interface element that is shown while your webpage is loading in the background. You can easily customize the Preloader customizer with two or three simple clicks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To do so:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard, then go to&nbsp;<strong>Appearance &gt; Customize&nbsp;<\/strong>.<\/li>\n\n\n\n<li>Then click on&nbsp;<strong>General Settings,<\/strong> then select<strong> Preloader<\/strong>.<\/li>\n\n\n\n<li>Now, at first, <strong>Enable Preloaders <\/strong>through the toggle option available at the top panel.<\/li>\n\n\n\n<li>After turning it on, you will be able to see the preloader layout with three different styles available.      <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1039\" height=\"581\" data-id=\"123\" src=\"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader.jpg\" alt=\"preloader\" class=\"wp-image-123\" srcset=\"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader.jpg 1039w, https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-300x168.jpg 300w, https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-1024x573.jpg 1024w, https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-768x429.jpg 768w\" sizes=\"auto, (max-width: 1039px) 100vw, 1039px\" \/><\/figure>\n<\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the own by making sure it appears on website (check through the live preview on your site)<\/li>\n<\/ul>\n\n\n\n<div class=\"mt-docs-green-note\">\n<p>The Free version features only three options for Pre-loaders. Switch to Blogbuster Pro for more option for preloaders and also choose on which devices you&#8217;d like to show your buffering icon<\/p> <\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"241\" height=\"454\" src=\"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-pro.jpg\" alt=\"preloader pro\" class=\"wp-image-154\" srcset=\"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-pro.jpg 241w, https:\/\/docs.mysterythemes.com\/blogbuster\/wp-content\/uploads\/sites\/27\/2025\/04\/preloader-pro-159x300.jpg 159w\" sizes=\"auto, (max-width: 241px) 100vw, 241px\" \/><\/figure>\n<\/div>\n\n\n<h2><b> How to choose devices to display your Preloaders for? <\/b><span class=\"mt-docs-pro-tag\"><\/span><\/h2>\n\n\n\n<p>Ypu can choose in between three different devices on where you would like to display your preloaders. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to Preloaders settings in Customizer<\/li>\n\n\n\n<li>There are three different icons in the option, Desktop, Mobile and Tablet.<\/li>\n\n\n\n<li>Click on the respective icons to choose your devices (<em>blue border shows that the preloader is displayed for those devices<\/em>)<\/li>\n\n\n\n<li>Click on <strong>Publish <\/strong>button to save your changes<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A preloader is an animated interface element that is shown while your webpage is loading in the background. You can easily customize the Preloader customizer with two or three simple clicks. To do so: The Free version features only three options for Pre-loaders. Switch to Blogbuster Pro for more option for preloaders and also choose [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":10,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/posts\/22\/revisions\/156"}],"wp:attachment":[{"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.mysterythemes.com\/blogbuster\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}