{"id":4067,"date":"2026-10-28T04:02:24","date_gmt":"2026-10-28T04:02:24","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/preloader\/"},"modified":"2026-11-04T05:18:48","modified_gmt":"2026-11-04T05:18:48","slug":"preloader","status":"publish","type":"page","link":"https:\/\/shapekode.com\/product\/shapeblock\/preloader\/","title":{"rendered":"Preloader"},"content":{"rendered":"<style id=\"shapeblock-block-css-6-inline-css\">\n.shapeblock-layout-row-hs006 { flex-direction:row;justify-content:center;align-items:stretch;align-content:stretch;flex-wrap:wrap;gap:20px;padding-top:64px;padding-right:16px;padding-bottom:64px;padding-left:16px;background-color:#5933ff;background-image:url(https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/banner-shape.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:scroll;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-hs006 { padding-top:48px;padding-right:15px;padding-bottom:48px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-hs006 { padding-top:48px;padding-right:15px;padding-bottom:48px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-hs006 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-hs005 { flex:0 1 calc(760px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(760px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-hs005 > .shapeblock-column__inner { display:flex;flex-direction:column;align-items:center; }.shapeblock-heading-block-wrap.shapeblock-heading-hs001 .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs001 .shapeblock-heading .shapeblock-title { font-size:24px;font-weight:500;line-height:1.3;color:#ffffff;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n@media (max-width: 767px) { .shapeblock-heading-block-wrap.shapeblock-heading-hs001 .shapeblock-heading .shapeblock-title { font-size:20px; } }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs002 .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs002 .shapeblock-heading .shapeblock-title { font-size:18px;font-weight:400;line-height:1.7;color:#ffffff;margin-top:12px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\n\n.sbp-abtn.sbp-abtn-hs003 { --sbp-ab-t-fw:500;--sbp-ab-c:#ffffff;--sbp-ab-bg:#0067ff;--sbp-ab-b-w:1px 1px 1px 1px;--sbp-ab-b-s:solid;--sbp-ab-b-c:#0067ff;--sbp-ab-r:4px 4px 4px 4px;--sbp-ab-pad:14px 22px 14px 22px;--sbp-ab-hc:#0067ff;--sbp-ab-hbg:#ffffff;--sbp-ab-hbc:#ffffff;--sbp-ab-dur:400;--sbp-ab-flair:600; }.sbp-abtn.sbp-abtn-hs003 .sbp-abtn__btn { font-weight:500; }\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n\n\n.sbp-abtn.sbp-abtn-hs004 { --sbp-ab-t-fw:500;--sbp-ab-c:#ffffff;--sbp-ab-bg:#00000000;--sbp-ab-b-w:1px 1px 1px 1px;--sbp-ab-b-s:solid;--sbp-ab-b-c:#ffffff;--sbp-ab-r:4px 4px 4px 4px;--sbp-ab-pad:14px 22px 14px 22px;--sbp-ab-hc:#ffffff;--sbp-ab-hbg:#0067ff;--sbp-ab-hbc:#0067ff;--sbp-ab-dur:400;--sbp-ab-flair:600; }.sbp-abtn.sbp-abtn-hs004 .sbp-abtn__btn { font-weight:500; }\n\/*# sourceURL=shapeblock-block-css-4-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-5-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-6-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-hs006 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs005 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h1 style=\"margin-bottom:8px\" class=\"has-link-color wp-elements-1 wp-block-post-title has-text-color has-base-color has-xx-large-font-size has-text-align-center\">Preloader<\/h1> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs001 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading align-center\"> <div class=\"shapeblock-title\">This page loads behind a thin bar first.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs002 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading align-center\"> <div class=\"shapeblock-title\">A loading screen that covers the page until it has finished loading, then fades away.<\/div>\t<\/div> <\/div> <div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-42828cfa wp-block-group-is-layout-flex\" style=\"margin-top:24px\"> <div class=\"shapeblock-block sbp-abtn sbp-abtn-hs003 wp-block-shapeblock-advanced-button\" data-sbp-style=\"roll\" data-sbp-roll=\"up\"><a class=\"sbp-abtn__btn\" href=\"https:\/\/shapekode.com\/product\/shapeblock\/pricing\/\"><span class=\"sbp-abtn__content\"><span class=\"sbp-abtn__text\">Get Started Now<\/span><\/span><span class=\"sbp-abtn__content sbp-abtn__clone\" aria-hidden=\"true\"><span class=\"sbp-abtn__text\">Get Started Now<\/span><\/span><\/a><\/div> <div class=\"shapeblock-block sbp-abtn sbp-abtn-hs004 wp-block-shapeblock-advanced-button\" data-sbp-style=\"roll\" data-sbp-roll=\"up\"><a class=\"sbp-abtn__btn\" href=\"https:\/\/shapekode.com\/product\/shapeblock\/docs\/preloader\/\"><span class=\"sbp-abtn__content\"><span class=\"sbp-abtn__text\">Documentation<\/span><\/span><span class=\"sbp-abtn__content sbp-abtn__clone\" aria-hidden=\"true\"><span class=\"sbp-abtn__text\">Documentation<\/span><\/span><\/a><\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-16-inline-css\">\n.shapeblock-layout-row-vg8w { flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:56px;padding-top:96px;padding-right:24px;padding-bottom:96px;padding-left:24px;background-color:#ffffff;--bp-gap:56px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-vg8w { padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-vg8w { padding-top:56px;padding-right:18px;padding-bottom:56px;padding-left:18px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vg8w > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row.shapeblock-layout-row-vg8w > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-vg8w > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vg8w > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}.shapeblock-layout-row-vg8u { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:56px;--bp-gap:56px;--bp-col-tablet:calc(100% - var(--bp-gap, 0px) * 0);--bp-col-mobile:calc(100% - var(--bp-gap, 0px) * 0); }\n@media (max-width: 1024px) { .shapeblock-layout-row-vg8u { padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; } }\n@media (max-width: 767px) { .shapeblock-layout-row-vg8u { padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; } }\n@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-vg8u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}.shapeblock-layout-row.shapeblock-layout-row-vg8u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vg8u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}.shapeblock-layout-row.shapeblock-layout-row-vg8u > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-vg8s { flex:0 1 calc(34% - var(--bp-gap, 0px) * 66 \/ 100) !important;max-width:calc(34% - var(--bp-gap, 0px) * 66 \/ 100) !important; }.shapeblock-layout-row-vg8r { flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;position:sticky;z-index:auto;width:100%;top:120px;--bp-gap:0px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-vg8r { padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; } }\n@media (max-width: 767px) { .shapeblock-layout-row-vg8r { padding-top:0;padding-right:0;padding-bottom:0;padding-left:0; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vg8r > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row.shapeblock-layout-row-vg8r > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-vg8r > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-vg8r > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}.shapeblock-heading-block-wrap.shapeblock-heading-vg8n .shapeblock-heading .shapeblock-title { font-size:13px;font-weight:600;text-transform:uppercase;line-height:1.6;letter-spacing:1.6px;color:#5933ff;margin-top:0;margin-right:0;margin-bottom:18px;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-7-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-vg8o .shapeblock-heading .shapeblock-title { font-size:42px;font-weight:700;line-height:1.1;letter-spacing:-1.2px;color:#0f172a;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n@media (max-width: 1024px) { .shapeblock-heading-block-wrap.shapeblock-heading-vg8o .shapeblock-heading .shapeblock-title { font-size:36px; } }\n@media (max-width: 767px) { .shapeblock-heading-block-wrap.shapeblock-heading-vg8o .shapeblock-heading .shapeblock-title { font-size:30px;letter-spacing:-0.8px; } }\n\/*# sourceURL=shapeblock-block-css-8-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-vg8p .shapeblock-heading .shapeblock-title { font-size:18px;font-weight:400;line-height:1.65;color:#475569;margin-top:20px;margin-right:0;margin-bottom:0;margin-left:0; }\n@media (max-width: 767px) { .shapeblock-heading-block-wrap.shapeblock-heading-vg8p .shapeblock-heading .shapeblock-title { font-size:16px; } }\n\/*# sourceURL=shapeblock-block-css-9-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-10-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-11-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-12-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-vg8t { flex:0 1 calc(66% - var(--bp-gap, 0px) * 34 \/ 100) !important;max-width:calc(66% - var(--bp-gap, 0px) * 34 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-13-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-14-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-15-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-16-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-vg8w is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-vg8v wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-vg8u is-content-boxed has-tablet-columns has-mobile-columns wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-vg8s wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div style=\"position:sticky;z-index:auto;top:120px\" class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-vg8r is-content-boxed is-sticky wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-vg8q wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-vg8n wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">Video guide<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-vg8o wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">See it built,<br>step by step.<\/h2>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-vg8p wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">The live demo first, then turning Preloader on and its settings.<\/div>\t<\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-vg8t wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <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\"> <iframe loading=\"lazy\" title=\"How to Add a Preloader (Loading Screen) to WordPress | ShapeBlock Pro Preloader\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/L6pHLAf2TLE?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> <\/div><\/figure> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-44-inline-css\">\n.shapeblock-layout-row-hs00y { flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:56px;padding-top:120px;padding-right:24px;padding-bottom:120px;padding-left:24px;background-color:#ffffff;--bp-gap:56px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-hs00y { padding-top:88px;padding-right:24px;padding-bottom:88px;padding-left:24px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-hs00y { padding-top:64px;padding-right:18px;padding-bottom:64px;padding-left:18px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-hs00y > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row.shapeblock-layout-row-hs00y > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-hs00y > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-hs00y > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-column:nth-child(1){flex:0 0 auto !important;max-width:100% !important;width:100%;}}.shapeblock-layout-row-hs00w { flex-direction:row;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:64px;--bp-gap:64px;--bp-col-tablet:calc(100% - var(--bp-gap, 0px) * 0);--bp-col-mobile:calc(100% - var(--bp-gap, 0px) * 0); }\n@media (max-width: 1024px) { .shapeblock-layout-row-hs00w { padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-hs00w { padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px; } }\n@media (max-width: 1024px){.shapeblock-layout-row.shapeblock-layout-row-hs00w > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}.shapeblock-layout-row.shapeblock-layout-row-hs00w > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}}@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-hs00w > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}.shapeblock-layout-row.shapeblock-layout-row-hs00w > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 calc(100% - var(--bp-gap, 0px) * 0) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0) !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-hs00u { flex:0 1 calc(46% - var(--bp-gap, 0px) * 54 \/ 100) !important;max-width:calc(46% - var(--bp-gap, 0px) * 54 \/ 100) !important; }.shapeblock-heading-block-wrap.shapeblock-heading-hs007 .shapeblock-heading .shapeblock-title { font-size:13px;font-weight:500;line-height:1.6;letter-spacing:0.4px;color:#8f5f43;margin-top:0;margin-right:0;margin-bottom:16px;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-17-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs008 .shapeblock-heading .shapeblock-title { font-family:Georgia, 'Times New Roman', serif;font-size:34px;font-weight:400;line-height:1.2;letter-spacing:-0.6px;color:#151515;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n@media (max-width: 1024px) { .shapeblock-heading-block-wrap.shapeblock-heading-hs008 .shapeblock-heading .shapeblock-title { font-size:30px; } }\n@media (max-width: 767px) { .shapeblock-heading-block-wrap.shapeblock-heading-hs008 .shapeblock-heading .shapeblock-title { font-size:25px; } }\n\/*# sourceURL=shapeblock-block-css-18-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs009 .shapeblock-heading .shapeblock-title { font-size:12px;font-weight:600;text-transform:uppercase;line-height:1.6;letter-spacing:1.4px;color:#8f5f43;margin-top:28px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-19-inline-css *\/\n\n\n.shapeblock-col-hs00j { margin-top:8px;margin-right:0;margin-bottom:0;margin-left:0; }.shapeblock-col-hs00c { padding-top:12px;padding-right:0;padding-bottom:13px;padding-left:0;border-style:solid;border-color:#dcd8cf;border-width:1px 0px 0px 0px; }.shapeblock-heading-block-wrap.shapeblock-heading-hs00a .shapeblock-heading .shapeblock-title { font-size:16px;font-weight:600;line-height:1.45;color:#151515;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00a .shapeblock-heading .shapeblock-title span { color:#8f5f43;margin-top:0;margin-right:12px;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-20-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00b .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:3px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-21-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-22-inline-css *\/\n\n\n.shapeblock-col-hs00f { padding-top:12px;padding-right:0;padding-bottom:13px;padding-left:0;border-style:solid;border-color:#dcd8cf;border-width:1px 0px 0px 0px; }.shapeblock-heading-block-wrap.shapeblock-heading-hs00d .shapeblock-heading .shapeblock-title { font-size:16px;font-weight:600;line-height:1.45;color:#151515;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00d .shapeblock-heading .shapeblock-title span { color:#8f5f43;margin-top:0;margin-right:12px;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-23-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00e .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:3px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-24-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-25-inline-css *\/\n\n\n.shapeblock-col-hs00i { padding-top:12px;padding-right:0;padding-bottom:13px;padding-left:0;border-style:solid;border-color:#dcd8cf;border-width:1px 0px 0px 0px; }.shapeblock-heading-block-wrap.shapeblock-heading-hs00g .shapeblock-heading .shapeblock-title { font-size:16px;font-weight:600;line-height:1.45;color:#151515;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00g .shapeblock-heading .shapeblock-title span { color:#8f5f43;margin-top:0;margin-right:12px;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-26-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00h .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:3px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-27-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-28-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-29-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00k .shapeblock-heading .shapeblock-title { font-size:12px;font-weight:600;text-transform:uppercase;line-height:1.6;letter-spacing:1.4px;color:#8f5f43;margin-top:26px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-30-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00l .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00l .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-31-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00m .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00m .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-32-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00n .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00n .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-33-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00o .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00o .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-34-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00p .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00p .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-35-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00q .shapeblock-heading .shapeblock-title { font-size:15px;font-weight:400;line-height:1.55;color:#6b6862;margin-top:9px;margin-right:0;margin-bottom:0;margin-left:0; }\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00q .shapeblock-heading .shapeblock-title span { font-weight:600;color:#151515; }\n\/*# sourceURL=shapeblock-block-css-36-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-37-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-hs00v { flex:0 1 calc(54% - var(--bp-gap, 0px) * 46 \/ 100) !important;max-width:calc(54% - var(--bp-gap, 0px) * 46 \/ 100) !important; }.shapeblock-col-hs00r { padding-top:22px;padding-right:22px;padding-bottom:22px;padding-left:22px;background-color:#f4f2ed; }\n@media (max-width: 767px) { .shapeblock-col-hs00r { padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px; } }\n\/*# sourceURL=shapeblock-block-css-38-inline-css *\/\n\n\n.shapeblock-col-hs00s { padding-top:22px;padding-right:22px;padding-bottom:22px;padding-left:22px;background-color:#f4f2ed; }\n@media (max-width: 767px) { .shapeblock-col-hs00s { padding-top:8px;padding-right:8px;padding-bottom:8px;padding-left:8px; } }\n\/*# sourceURL=shapeblock-block-css-39-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-hs00t .shapeblock-heading .shapeblock-title { font-size:13px;font-weight:400;line-height:1.55;color:#9a968e;margin-top:12px;margin-right:0;margin-bottom:0;margin-left:0; }\n\/*# sourceURL=shapeblock-block-css-40-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-41-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-42-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-43-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-44-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-hs00y is-content-boxed alignfull wp-block-shapeblock-layout-row\" id=\"setup\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00x wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-hs00w is-content-boxed has-tablet-columns has-mobile-columns wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div data-sb-entrance=\"fade-up\" style=\"--sb-motion-duration:900ms;--sb-motion-delay:0ms\" class=\"shapeblock-block shapeblock-column shapeblock-col-hs00u wp-block-shapeblock-column shapeblock-motion\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs007 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">Preloader, in short<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs008 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Shows a loading screen until the page is ready, so visitors never see it half-built.<\/h2>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs009 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">Set it up<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00j wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00c wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00a wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>1<\/span>ShapeBlock \u203a Extensions<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00b wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">Switch on the Preloader card.<\/div>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00f wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00d wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>2<\/span>Click the gear on that card<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00e wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">The Preloader settings open.<\/div>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00i wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00g wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>3<\/span>Pick a Style, set Show On, Save Changes<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00h wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">All pages, or Selected pages.<\/div>\t<\/div> <\/div> <\/div><\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00k wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">In the settings<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00l wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Style<\/span>  6 styles: Spinner, Dotted Circle Spinner, Dots, Bar, Pulse, Logo.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00m wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Logo, Logo Width<\/span>  for the Logo style: an image from the Media Library, 8 to 400 px.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00n wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Size<\/span>  16 to 400 px.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00o wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Background<\/span>  a color or a gradient.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00p wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Color<\/span>  the spinner, dots, bar or pulse.<\/div>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00q wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\"><span>Show On<\/span>  All pages or Selected pages.<\/div>\t<\/div> <\/div> <\/div><\/div> <div data-sb-entrance=\"fade-up\" style=\"--sb-motion-duration:900ms;--sb-motion-delay:150ms\" class=\"shapeblock-block shapeblock-column shapeblock-col-hs00v wp-block-shapeblock-column shapeblock-motion\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00r shapeblock-hide-mobile wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <figure class=\"wp-block-image size-full is-resized has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1100\" height=\"758\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e.webp\" alt=\"Preloader settings with the Style list open: Spinner, Dotted Circle Spinner, Dots, Bar, Pulse, Logo\" class=\"wp-image-4624\" style=\"border-radius:3px;aspect-ratio:1100\/758;object-fit:cover;width:100%;height:auto\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e.webp 1100w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e-600x413.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e-300x207.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e-1024x706.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-ec7a0e-768x529.webp 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/figure> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-hs00s shapeblock-hide-desktop shapeblock-hide-tablet wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <figure class=\"wp-block-image size-full is-resized has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"992\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-m-09d111.webp\" alt=\"Preloader settings with the Style list open: Spinner, Dotted Circle Spinner, Dots, Bar, Pulse, Logo\" class=\"wp-image-4630\" style=\"border-radius:3px;aspect-ratio:700\/992;object-fit:cover;width:100%;height:auto\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-m-09d111.webp 700w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-m-09d111-600x850.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/preloader-settings-open-m-09d111-212x300.webp 212w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure> <\/div><\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hs00t wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <div class=\"shapeblock-title\">The Preloader settings in ShapeBlock \u203a Extensions, with the Style list open.<\/div>\t<\/div> <\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div> <\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width","meta":{"_blockode_hide_title":true,"footnotes":""},"class_list":["post-4067","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/4067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4067"}],"version-history":[{"count":9,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/4067\/revisions"}],"predecessor-version":[{"id":5549,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/4067\/revisions\/5549"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}