The ska-theme’s “Loading” 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:
.ska-preset--ska-theme--loading:is(.wp-element-button, .wp-block-button__link, .ska-preset--ska-theme--button).loading.blockUI.blockOverlay
Additional custom selectors can be added using the following filter:
add_filter('ska_theme_loading_selectors', function($selectors) {
$selectors[] = 'form[data-submitting="true"]';
return $selectors;
});The loading spinner appearance can be customized with Tailwind classes by editing the Loading preset under ska-blocks -> Options -> Presets -> Loading.
Integrations
- Contact Form 7 – The loading preset is applied to contact forms when submitting.
- WooCommerce – The loading preset is used on AJAX add to cart buttons, when updating cart contents, when loading mini cart and when submitting checkout data.
- jQuery BlockUI Plugin – The loading preset overrides the default
jquery-blockuiloading state appearance, which is a commonly used jQuery plugin in WordPress plugins.
Examples
Loading preset applied to an Element
Content…
<!-- wp:ska/element {"skaBlocks":{"cx":"p-gutter bg-plain rounded border","css":".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}","t":1758876679,"p":[{"id":"ska-theme--loading","isStatic":true}]},"skaBlocksPadding":{"v":{"$":{"@":"gutter"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"plain"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}}} -->
<div class="p-gutter bg-plain rounded border wp-block-ska-element">
<!-- wp:heading -->
<h2 class="wp-block-heading">Content...</h2>
<!-- /wp:heading -->
</div>
<!-- /wp:ska/element -->A button with .loading class
<!-- wp:ska/text {"skaBlocks":{"cx":"","css":"","t":1758876679,"p":[{"id":"ska-theme--button","isStatic":true}]},"skaBlocksAs":{"element":"a"},"skaBlocksVariation":"ska-theme--button","className":"loading"} -->
<a class="wp-block-ska-text ska-text loading">Button text</a>
<!-- /wp:ska/text -->Loading preset with customizations
To change the loader size --loader-size CSS variable can be specified, such as [--loader-size:var(--spacing-14)]. Additionally you can edit the Loading preset directly, or add Tailwind classes to override its’ appearance on a case by case basis, such as after:border-4!, after:border-t-secondary!, after:[animation-duration:2s!important]:
Heading
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.
<!-- wp:ska/element {"skaBlocks":{"cx":"[--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!","css":".\\[--loader-size\\:var\\(--spacing-14\\)\\]{--loader-size:var(--spacing-14)}.after\\:\\[animation-duration\\:2s\\!important\\]: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\\:border-4\\!:after{content:var(--tw-content);border-style:var(--tw-border-style)!important;border-width:4px!important}.after\\:border-t-secondary\\!:after{content:var(--tw-content);border-top-color:var(--color-secondary)!important}","t":1758876679,"p":[{"id":"ska-theme--loading","isStatic":true}]},"skaBlocksSelectors":{"after":{"skaBlocksBorderWidth":{"v":{"$":{"@":"4!"}}},"skaBlocksBorderColor":{"v":{"$":{"@":"","t":"secondary!"}},"t":"sides"},"skaBlocksVariables":{"record":{"animation-duration":{"value":"2s!important","type":""}}}}},"skaBlocksVariables":{"record":{"--loader-size":{"value":"var(--spacing-14)","type":"spacing"}}},"skaBlocksAspectRatio":{"v":{"$":{"@":"video"}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"col"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"center"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksPadding":{"v":{"$":{"@":"gutter"}}},"skaBlocksTextAlign":{"v":{"$":{"@":"center"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"plain-light"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}}} -->
<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">
<!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<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>
<!-- /wp:paragraph -->
</div>
<!-- /wp:ska/element -->