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.
You can also use skeletons to show placeholders for components by adding
the skeleton class to many existing components.
.flex.flex-col.gap-8
.flex.items-center.gap-8
= daisy_badge(css: "badge-lg skeleton text-base-content/50") do
Loading...
.w-12.md:w-48
= daisy_button(css: "skeleton text-transparent") do
Loading...
= daisy_button(css: "skeleton text-transparent") 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.