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
Tue 28 Apr 2026
Atoms are the fundemental building blocks.
Tue 28 Apr 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="69f0d09c9f672" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- 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="69f0d09c9f767" 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">
<!-- 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="69f0d09c9f946" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09c9f902" 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="69f0d09c9f87f" 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="69f0d09c9faee" data-component="typography">
<!-- icon.blade.php -->
<span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09c9f9b9" data-component="icon">
</span>
<time class="c-date" data-date="2026-04-28T15:22:04" datetime="2026-04-28T15:22:04" data-uid="69f0d09c9faa1" data-component="date">Tue 28 Apr 2026 </time>
</span> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d09c9fb5b" 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="69f0d09c9fbb8" data-component="card">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- 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="69f0d09c9fc29" 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">
<!-- 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="69f0d09c9fd69" data-component="group">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d09c9fd34" 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="69f0d09c9fcf8" 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="69f0d09c9fe4d" data-component="typography">
<!-- icon.blade.php -->
<span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09c9fdc3" data-component="icon">
</span>
<time class="c-date" data-date="2026-04-28T15:22:04" datetime="2026-04-28T15:22:04" data-uid="69f0d09c9fe11" data-component="date">Tue 28 Apr 2026 </time>
</span> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d09c9fe9c" 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="69f0d09ca05a1" 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_69f0d09ca062c" data-uid="69f0d09ca0647" data-component="field">
<label class="c-field__label " for="input_id_69f0d09ca062c" id="label_id_69f0d09ca062c">
Username
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_id_69f0d09ca062c" value="" aria-labelledby="label_id_69f0d09ca062c" placeholder="Enter your username" type="text" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca069c" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca06e8" data-component="icon">
</span>
</div>
</div>
</div>
<div class="u-margin__top--2">
<div class="c-field c-select c-select--md c-select--singleselect" id="id_69f0d09ca0759" data-js-toggle-item="69f0d09ca0759-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="69f0d09ca076d" data-component="select">
<label class="c-field__label" for="select_69f0d09ca0759">
Country
</label>
<div class="c-select__field-container">
<select id="select_69f0d09ca0759" 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 -->
<span class="c-icon c-select__expand-less-icon c-icon--expand-less c-icon--material c-icon--material-expand_less material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="expand_less" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca080a" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__expand-more-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0859" data-component="icon">
</span>
</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="69f0d09ca08fd" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0948" data-component="icon">
</span>
</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="69f0d09ca0759-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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0a04" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0a47" data-component="icon">
</span>
<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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0aa3" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0ae1" data-component="icon">
</span>
<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 -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0b39" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0b75" data-component="icon">
</span>
<span class="c-select__option-label">Denmark</span>
</li> </ul>
</div> <div class="c-select__select-invalid-message" id="error_input_69f0d09ca0759_message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09ca0bd9" data-component="icon">
</span>
<span class="errorText"></span>
</div>
<template>
<li class="c-select__option " data-js-dropdown-option="false" role="option" aria-selected="false" tabindex="0">
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__unchecked-icon c-icon--radio-button-unchecked c-icon--material c-icon--material-radio_button_unchecked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_unchecked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0c4b" data-component="icon">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-select__option-icon c-select__checked-icon c-icon--radio-button-checked c-icon--material c-icon--material-radio_button_checked material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="radio_button_checked" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09ca0c88" data-component="icon">
</span>
<span class="c-select__option-label">{OPTION_NAME}</span>
</li> </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="69f0d09ca0cd0" 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="69f0d09ca0d47" 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 class="c-option__checkbox--label-box"></span>
<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 -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09ca0d8b" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div> <!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="SMS notifications" id="sms-notif" data-uid="69f0d09ca0dc8" 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 class="c-option__checkbox--label-box"></span>
<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 -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d09ca0e00" data-component="icon">
</span>
<span class="errorText"></span>
</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="69f0d09ca0e43" data-component="button">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text ">
Save Settings
</span>
</span> </button> </div>
</div>
</div>
