{"id":4672,"date":"2025-08-15T08:04:15","date_gmt":"2025-08-15T02:19:15","guid":{"rendered":"https:\/\/js.dearflip.com\/?post_type=docs&#038;p=4672"},"modified":"2025-08-15T08:40:47","modified_gmt":"2025-08-15T02:55:47","password":"","slug":"customize-loading","status":"publish","type":"docs","link":"https:\/\/js.dearflip.com\/docs\/customize-loading\/","title":{"rendered":"Customize Loading"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Change the Loading text<\/h2>\n\n\n\n<p>Currently the loading text is <code>Loading...<\/code> It is taken from <code>DEARFLIP.defaults.loading<\/code><\/p>\n\n\n\n<p>Changing it to required text will change the loading text. <a href=\"https:\/\/js.dearflip.com\/docs\/translating-ui-texts\/\" data-type=\"docs\" data-id=\"4675\">More about translation text<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DEARFLIP.defaults.loading = \"Custom Loading Text...\";<\/code><\/pre>\n\n\n\n<p>Change the text before loading dflip.min.js but before the scripts starts to run on.<\/p>\n\n\n<div class=\"wp-block-create-block-dearcode\"><pre><code class=\"language-javascript\">jQuery(document).ready(function () {\n\nDEARFLIP.defaults.text.loading =&quot;My custom loading&quot;;\n\n});<\/code><\/pre><\/div>\n\n\n<p>If you do not have jQuery. You can use <code>DEARFLIP <\/code>callback function <code>beforeDearFlipInit<\/code><\/p>\n\n\n<div class=\"wp-block-create-block-dearcode\"><pre><code class=\"language-javascript\">window.beforeDearFlipInit = function(){\r\n\r\nDEARFLIP.defaults.text.loading =&quot;My custom loading&quot;;\r\n\r\n};<\/code><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Changing Loading Icon and Design<\/h2>\n\n\n\n<p>The Icon and Design can be updated using Custom CSS. using their respective selectors.<\/p>\n\n\n\n<p>Selector for Loading icon:<code> .df-container .df-loading-icon<\/code><br>Selector for Loading text:  <code>.df-container .df-loading-info<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example usage:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>.df-container .df-loading-icon{\n  background-color:yellow;\n  \/\/background-image: url(\"Custom url\")\n}\n\n.df-container .df-loading-info{\n  color:red;\n}<\/code><\/pre>\n\n\n\n<style>\n.df-container .df-loading-icon{\nbackground-color:yellow;\n\/\/background-image: url(\"Custom url\")\n}\n.df-container .df-loading-info{\ncolor:red;\n}\n<\/style>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Demo:<\/h2>\n\n\n\n<script>\n\nwindow.beforeDearFlipInit = function(){\nDEARFLIP.defaults.onInitResourcesLocation = function(app){\napp.options.text.loading =\"My custom loading\";\n};\n};\n<\/script>\n\n\n<div class=\"_df_book df-container df-loading \"  data-slug=\"3d-flipbook\" data-_slug=\"3d-flipbook\" _slug=\"3d-flipbook\" data-title=\"lifestyle-magazine\" id=\"df_91\" data-df-option=\"df_option_91\" ><\/div><script class=\"df-shortcode-script\" nowprocket type=\"application\/javascript\">window.df_option_91 = {\"source\":\"https:\\\/\\\/js.dearflip.com\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Lifestyle-Magazine.pdf\",\"outline\":[],\"color3DCover\":\"#90b35e\",\"backgroundColor\":\"#f3f0fc\",\"autoEnableOutline\":false,\"autoEnableThumbnail\":false,\"overwritePDFOutline\":false,\"pageMode\":\"0\",\"pageSize\":\"0\",\"direction\":\"1\",\"slug\":\"3d-flipbook\",\"wpOptions\":\"true\",\"id\":91}; if(window.DFLIP && window.DFLIP.parseBooks){window.DFLIP.parseBooks();}<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Change the Loading text Currently the loading text is Loading&#8230; It is taken from DEARFLIP.defaults.loading Changing it to required text will change the loading text. More about translation text Change the text before loading dflip.min.js but before the scripts starts to run on. If you do not have jQuery. You can use DEARFLIP callback function &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Customize Loading\" class=\"read-more button\" href=\"https:\/\/js.dearflip.com\/docs\/customize-loading\/\" aria-label=\"Customize Loading\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"doc_category":[115],"doc_tag":[],"class_list":["post-4672","docs","type-docs","status-publish","hentry","doc_category-customizations"],"aioseo_notices":[],"year_month":"2026-05","word_count":141,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Deepak Ghimire","author_nicename":"deip-ghimire","author_url":"https:\/\/js.dearflip.com\/author\/deip-ghimire\/"},"doc_category_info":[{"term_name":"Customizations","term_url":"https:\/\/js.dearflip.com\/docs-category\/customizations\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/comments?post=4672"}],"version-history":[{"count":5,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4672\/revisions"}],"predecessor-version":[{"id":4704,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/docs\/4672\/revisions\/4704"}],"wp:attachment":[{"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/media?parent=4672"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/doc_category?post=4672"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/js.dearflip.com\/wp-json\/wp\/v2\/doc_tag?post=4672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}