Skeleton

<sc-skeleton></sc-skeleton>

Skeletons are use to show the loading state of UI elements that will eventually be redrawn.

Skeletons are purposly simple and minimal to give you the most flexibility to designing layouts. You'll likely use more than one skeleton to achieve your desired effect.

Preview

<div>
	<header style="display: flex; align-items: center; margin-bottom: 1rem;">
		<sc-skeleton style="width: 3rem; height: 3rem; margin-right: 1rem; vertical-align: middle;"></sc-skeleton>
		<sc-skeleton style="width: 30%;"></sc-skeleton>
	</header>
	<sc-skeleton style="margin-bottom: 1rem;"></sc-skeleton>
	<sc-skeleton style="margin-bottom: 1rem; width: 95%;"></sc-skeleton>
	<sc-skeleton style="margin-bottom: 1rem; width: 80%;"></sc-skeleton>
</div>

Code

Component Codex

Properties

Property	Description	Type	Default
effect	Animation effect	"none" | "pulse" | "sheen"	'sheen'

Shadow Parts

Part	Description
base
indicator

Used By

• sc-cancel-survey
• sc-charges-list
• sc-checkout-mollie-payment
• sc-coupon-form
• sc-custom-order-price-input
• sc-customer-details
• sc-donation-choices
• sc-fulfillments
• sc-invoices-list
• sc-license
• sc-licenses-list
• sc-line-item-shipping
• sc-line-item-total
• sc-line-items
• sc-mollie-add-method
• sc-order
• sc-order-confirmation-details
• sc-order-confirmation-line-items
• sc-order-detail
• sc-order-summary
• sc-orders-list
• sc-payment-methods-list
• sc-paypal-buttons
• sc-price-choice
• sc-price-choice-container
• sc-product-item-list
• sc-purchase-downloads-list
• sc-stripe-add-method
• sc-stripe-payment-element
• sc-subscription
• sc-subscription-cancel
• sc-subscription-details
• sc-subscription-next-payment
• sc-subscription-payment
• sc-subscription-payment-method
• sc-subscription-reactivate
• sc-subscription-switch
• sc-subscriptions-list
• sc-summary
• sc-upcoming-invoice