Skeletons are used to show a placeholder for content that is loading or being fetched. They are often used to give the user an idea of what the content will look like before it is loaded.
Skeletons can take on various shapes and sizes that you define.
Use skeleton-text alongside skeleton to animate placeholder text
with the same shimmer gradient. This is useful for text-only loading
states such as AI-generated content or dynamic labels.
You can also use skeletons to show placeholders for components by adding
the skeleton class to many existing components.
When applying a skeleton to a placeholder avatar (one with no src or
icon), pass wrapper_css: "skeleton" — the avatar component detects
the skeleton class and automatically suppresses its default
bg-neutral so the skeleton shimmer color shows correctly.
.flex.flex-col.gap-8
.flex.items-center.gap-8
= daisy_badge(css: "badge-lg skeleton text-transparent") do
Loading...
.w-12.md:w-48
= daisy_button(css: "skeleton text-transparent") do
Loading...
= daisy_button(css: "skeleton skeleton-text") do
Loading...
= daisy_alert(css: "skeleton")
= daisy_chat do |chat|
- chat.with_avatar(wrapper_css: "skeleton")
- chat.with_bubble(css: "skeleton text-transparent") do
Here is text that won't be displayed...
= daisy_chat do |chat|
- chat.with_avatar(wrapper_css: "skeleton")
- chat.with_bubble(css: "skeleton text-transparent") do
Here is a lot more text that won't be displayed and people can't see...
= daisy_chat(css: "chat-end") do |chat|
- chat.with_avatar(wrapper_css: "skeleton")
- chat.with_bubble(css: "skeleton text-transparent") do
Here is some more text that won't be displayed...
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.