{"id":595,"date":"2025-11-16T08:35:07","date_gmt":"2025-11-16T08:35:07","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/?p=595"},"modified":"2025-11-16T08:41:05","modified_gmt":"2025-11-16T08:41:05","slug":"loader","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/loader\/","title":{"rendered":"Loader"},"content":{"rendered":"\n<p class=\"lead\">The ska-theme&#8217;s &#8220;Loading&#8221; <a href=\"https:\/\/ska-blocks.com\/docs\/presets\/\" data-type=\"post\" data-id=\"46\">preset<\/a> can be applied to produce an overlay with a loading spinner.<\/p>\n\n\n\n<p>Loading preset is globally loaded on the front end and applied to the following CSS selectors by default:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.ska-preset--ska-theme--loading<\/code><\/li>\n\n\n\n<li><code>:is(.wp-element-button, .wp-block-button__link, .ska-preset--ska-theme--button).loading<\/code><\/li>\n\n\n\n<li><code>.blockUI.blockOverlay<\/code><\/li>\n<\/ul>\n\n\n\n<p>Additional custom selectors can be added using the following filter:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Adding a custom loading preset selector<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">add_filter('ska_theme_loading_selectors', function($selectors) {\n\t$selectors&#91;] = 'form&#91;data-submitting=\"true\"]';\n\treturn $selectors;\n});<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>The loading spinner appearance can be customized with Tailwind classes by editing the Loading preset under <strong>ska-blocks -&gt; Options -&gt; Presets -&gt; Loading<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integrations<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ska-blocks.com\/docs\/contact-form-7\/\" data-type=\"post\" data-id=\"27\">Contact Form 7<\/a> &#8211; The loading preset is applied to contact forms when submitting.<\/li>\n\n\n\n<li><a href=\"https:\/\/ska-blocks.com\/docs\/woocommerce\/\" data-type=\"post\" data-id=\"26\">WooCommerce<\/a> &#8211; The loading preset is used on AJAX add to cart buttons, when updating cart contents, when loading mini cart and when submitting checkout data.<\/li>\n\n\n\n<li><a href=\"https:\/\/jquery.malsup.com\/block\/\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery BlockUI Plugin<\/a> &#8211; The loading preset overrides the default <code>jquery-blockui<\/code> loading state appearance, which is a commonly used jQuery plugin in WordPress plugins.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Loading preset applied to an Element<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"p-gutter bg-plain rounded border wp-block-ska-element ska-preset--ska-theme--loading\">\n<h2 class=\"wp-block-heading\">Content&#8230;<\/h2>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;p-gutter bg-plain rounded border&quot;,&quot;css&quot;:&quot;.p-gutter{padding:var(--gutter)}.bg-plain{background-color:var(--color-plain)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--loading&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;gutter&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;p-gutter bg-plain rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading --&gt;\n&lt;h2 class=&quot;wp-block-heading&quot;&gt;Content...&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">A button with <code>.loading<\/code> class<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<a class=\"wp-block-ska-text ska-text loading ska-preset--ska-theme--button\">Button text<\/a>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;&quot;,&quot;css&quot;:&quot;&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;className&quot;:&quot;loading&quot;} --&gt;\n&lt;a class=&quot;wp-block-ska-text ska-text loading&quot;&gt;Button text&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Loading preset with customizations<\/h3>\n\n\n\n<p>To change the loader size <code>--loader-size<\/code> CSS variable can be specified, such as <code>[--loader-size:var(--spacing-14)]<\/code>. Additionally you can edit the Loading preset directly, or add Tailwind classes to override its&#8217; appearance on a case by case basis, such as <code>after:border-4!<\/code>, <code>after:border-t-secondary!<\/code>, <code>after:[animation-duration:2s!important]<\/code>:<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"[--loader-size:var(--spacing-14)] after:[animation-duration:2s!important] aspect-video flex flex-col justify-center items-center p-gutter text-center bg-plain-light rounded border after:border-4! after:border-t-secondary! wp-block-ska-element ska-preset--ska-theme--loading\">\n<h2 class=\"wp-block-heading\">Heading<\/h2>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis orci dignissim, dignissim nisi in, interdum orci. Nullam a maximus nibh, lobortis accumsan lectus. Donec vel libero eu urna consectetur commodo eget in nunc. Nam tincidunt arcu eget lorem luctus auctor nec a tortor.<\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--loader-size:var(--spacing-14)] after:[animation-duration:2s!important] aspect-video flex flex-col justify-center items-center p-gutter text-center bg-plain-light rounded border after:border-4! after:border-t-secondary!&quot;,&quot;css&quot;:&quot;.\\u005c[--loader-size\\u005c:var\\u005c(--spacing-14\\u005c)\\u005c]{--loader-size:var(--spacing-14)}.after\\u005c:\\u005c[animation-duration\\u005c:2s\\u005c!important\\u005c]:after{content:var(--tw-content);animation-duration:2s!important}.aspect-video{aspect-ratio:var(--aspect-video)}.flex{display:flex}.flex-col{flex-direction:column}.justify-center{justify-content:center}.items-center{align-items:center}.p-gutter{padding:var(--gutter)}.text-center{text-align:center}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.after\\u005c:border-4\\u005c!:after{content:var(--tw-content);border-style:var(--tw-border-style)!important;border-width:4px!important}.after\\u005c:border-t-secondary\\u005c!:after{content:var(--tw-content);border-top-color:var(--color-secondary)!important}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--loading&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;4!&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;secondary!&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;animation-duration&quot;:{&quot;value&quot;:&quot;2s!important&quot;,&quot;type&quot;:&quot;&quot;}}}}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--loader-size&quot;:{&quot;value&quot;:&quot;var(--spacing-14)&quot;,&quot;type&quot;:&quot;spacing&quot;}}},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;video&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;col&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;gutter&quot;}}},&quot;skaBlocksTextAlign&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;[--loader-size:var(--spacing-14)] after:[animation-duration:2s!important] aspect-video flex flex-col justify-center items-center p-gutter text-center bg-plain-light rounded border after:border-4! after:border-t-secondary! wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading --&gt;\n&lt;h2 class=&quot;wp-block-heading&quot;&gt;Heading&lt;\/h2&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse facilisis orci dignissim, dignissim nisi in, interdum orci. Nullam a maximus nibh, lobortis accumsan lectus. Donec vel libero eu urna consectetur commodo eget in nunc. Nam tincidunt arcu eget lorem luctus auctor nec a tortor.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>The ska-theme&#8217;s &#8220;Loading&#8221; preset can be applied to produce an overlay with a loading spinner. Loading preset is globally loaded on the front end and applied to the following CSS selectors by default: Additional custom selectors can be added using the following filter: The loading spinner appearance can be customized with Tailwind classes by editing&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5],"class_list":["post-595","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-ui"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=595"}],"version-history":[{"count":4,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/595\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/595\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}