Home
Utilities
Preloader
Preloader
The .u-preloader--inner modifier applies the shimmer animation to the inner content of the element, allowing the outer structure to remain visible while the loading state is active.
Inner
Usage
/* Format */
.u-preloader--{modifier} {}
/* Examples & modifiers */
.u-preloader--inner {}
Modifier
Values
Description
modifier
inner
The .u-preloader--inner modifier applies the shimmer animation to the inner content of the element, allowing the outer structure to remain visible while the loading state is active.
Examples
Wed 01 Jul 2026
Atoms are the fundemental building blocks.
Wed 01 Jul 2026
Atoms are the fundemental building blocks.
<div class="o-grid">
<div class="o-grid-4@md">
<!-- card.blade.php -->
<div class="c-card u-preloader--inner c-card--has-image c-card--ratio-16-9" data-uid="6a44fe48eacc2" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-uid="6a44fe48eaed8" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--type-1&ixid=eyjhchbfawqiojeymdd9&w=1000&q=80 c-image--cover" data-uid="6a44fe48eadc9" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=
"ALT" />
</div>
</figure>
</div>
<div class="c-card__body" data-uid="6a44fe48eb348" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a44fe48eb06e" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fe48eb01d" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a44fe48eaf98" data-component="typography">
A headline of a card
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6a44fe48eb23f" data-component="typography"><!-- icon.blade.php -->
<time class="c-date" data-date="2026-07-01T11:47:20" datetime="2026-07-01T11:47:20" data-uid="6a44fe48eb1e6" data-component="date">Wed 01 Jul 2026</time></span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a44fe48eb2c6" data-component="typography">
Atoms are the fundemental building blocks.
</p>
</div>
</div>
</div>
</div>
<div class="o-grid-4@md">
<!-- card.blade.php -->
<div class="c-card u-preloader--inner c-card--has-image c-card--ratio-16-9" data-uid="6a44fe48eb3cc" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container" data-uid="6a44fe48eb51a" data-component="card__image">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--type-1&ixid=eyjhchbfawqiojeymdd9&w=1000&q=80 c-image--cover" data-uid="6a44fe48eb46a" data-component="image">
<div class="c-image__image-wrapper">
<img loading="lazy" class="c-image__image" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=
"ALT" />
</div>
</figure>
</div>
<div class="c-card__body" data-uid="6a44fe48eb82a" data-component="card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a44fe48eb63c" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a44fe48eb5f5" data-component="group">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a44fe48eb5ac" data-component="typography">
A headline of a card
</h2>
</div>
</div><!-- typography.blade.php (hasSeenH1) original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6a44fe48eb764" data-component="typography"><!-- icon.blade.php -->
<time class="c-date" data-date="2026-07-01T11:47:20" datetime="2026-07-01T11:47:20" data-uid="6a44fe48eb70f" data-component="date">Wed 01 Jul 2026</time></span>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a44fe48eb7cf" data-component="typography">
Atoms are the fundemental building blocks.
</p>
</div>
</div>
</div>
</div>
</div>
Preloader
The preloader utility (.u-preloader) adds a shimmer loading animation to components, providing visual feedback during asynchronous operations.
Examples
User Preferences Form
Save Settings
<div class="u-display--grid" style="gap: 16px;">
<div data-utility-preview-target="" class="u-preloader" style="padding: 20px; background: #ffffff; border: 1px solid #ddd; border-radius: 8px;">
<!-- typography.blade.php (hasSeenH1) original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6a44fe48ebf73" data-component="typography">
User Preferences Form
</h4>
<div class="u-margin__top--2">
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6a44fe48ec016" data-uid="6a44fe48ec032" data-component="field">
<label class="c-field__label" for="input_id_6a44fe48ec016" id="label_id_6a44fe48ec016">Username</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_id_6a44fe48ec016" value="" aria-labelledby="label_id_6a44fe48ec016" placeholder="Enter your username" type="text" autocomplete="on" />
<div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
<!-- icon.blade.php -->
</div>
</div>
</div>
<div class="u-margin__top--2">
<div class="c-field c-select c-select--md c-select--singleselect" id="id_6a44fe48ec188" data-js-toggle-item="6a44fe48ec188-open-dropdown" data-js-toggle-class="is-open"
data-js-select-component="true" data-js-click-away="is-open" data-js-is-empty-select="true" data-js-device-detect="true" data-js-select-type="single" data-uid="6a44fe48ec1b1" data-component=
"select">
<label class="c-field__label" for="select_6a44fe48ec188">Country</label>
<div class="c-select__field-container">
<select id="select_6a44fe48ec188" data-js-select-element="1" class="c-select__select-element" tabindex="-1">
<option class="c-select__select-option" value="">
</option>
<option class="c-select__select-option" value="se">
Sweden
</option>
<option class="c-select__select-option" value="no">
Norway
</option>
<option class="c-select__select-option" value="dk">
Denmark
</option>
</select>
<div class="c-select_focus-styler u-level-top"></div>
<div class="c-select__expand-button" role="button">
<!-- icon.blade.php -->
<!-- icon.blade.php -->
</div><button class="c-button c-select__clear-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" data-js-select-clear="1" aria-label="close" type="button"
data-uid="6a44fe48ec3b5" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
<div class="c-field__inner">
<div class="c-select__action-overlay" tabindex="0" data-js-select-action-overlay="" data-js-toggle-trigger="6a44fe48ec188-open-dropdown" data-js-placeholder=""></div>
</div>
</div><!-- Visual dropdown list -->
<div class="c-select__dropdown" data-js-dropdown-element="true" aria-hidden="true">
<ul class="c-select__options u-unlist u-padding--0 u-margin--0" role="listbox">
<li class="c-select__option" data-js-dropdown-option="se" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<!-- icon.blade.php -->
<span class="c-select__option-label">Sweden</span>
</li>
<li class="c-select__option" data-js-dropdown-option="no" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<!-- icon.blade.php -->
<span class="c-select__option-label">Norway</span>
</li>
<li class="c-select__option" data-js-dropdown-option="dk" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<!-- icon.blade.php -->
<span class="c-select__option-label">Denmark</span>
</li>
</ul>
</div>
<div class="c-select__select-invalid-message" id="error_input_6a44fe48ec188_message">
<!-- icon.blade.php -->
</div>
<template>
<ul>
<li class="c-select__option" data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<!-- icon.blade.php -->
<span class="c-select__option-label">{OPTION_NAME}</span>
</li>
</ul>
</template>
</div>
</div>
<div class="u-margin__top--2">
<!-- typography.blade.php (hasSeenH1) original: label -->
<label class="c-typography c-typography__variant--label" data-uid="6a44fe48ec8cb" data-component="typography">Notification Preferences</label> <!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="Email notifications" id="email-notif" data-uid="6a44fe48ec956" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Email notifications"
value="" aria-checked="false" tabindex="0" label="Email notifications" aria-labelledby="label_email-notif" /> <label for="email-notif" class="c-option__checkbox--label"> <span id=
"label_email-notif" class="c-option__checkbox--label-text">Email notifications</span></label>
<div id="error_input_email-notif_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="SMS notifications" id="sms-notif" data-uid="6a44fe48eca05" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="SMS notifications" value=""
aria-checked="false" tabindex="0" label="SMS notifications" aria-labelledby="label_sms-notif" /> <label for="sms-notif" class="c-option__checkbox--label"> <span id="label_sms-notif" class=
"c-option__checkbox--label-text">SMS notifications</span></label>
<div id="error_input_sms-notif_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
</div>
<div class="u-margin__top--3">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" type="button" aria-label="Save Settings" data-uid="6a44fe48ecaa3" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Save Settings</span></span></button>
</div>
</div>
</div>
