New style skeleton background for text and content

[tung13041996]

In a recent project, the designer provided feedback about our skeleton background style. They gave our team some references for the skeleton background:

• https://ant.design/components/skeleton
• https://flowbite.com/docs/components/skeleton/
• https://tailwindcss.com/docs/animation#adding-a-pulse-animation

Therefore, we need to update the skeleton background style.

Our themes currently use the skeleton background with only a class, without any additional HTML markup, as shown in this screenshot.

So, the FE team will review the references from the designer and propose a solution.

Requirement:

• Still use class skeleton-bg if used for image
• Use class skeleton-bg.text if used for text

Please present the solution to the Leader before implementation.

[Thanhdan0811]

@tung13041996 I have made a demo for skeleton image and text.
you can check briefly through this link : demo
And if you have any suggests for change or fix something. please let me know.

[tung13041996]

@Thanhdan0811
With skeleton-bg, please resize the image to a smaller size. Also, can we change the image like this:

With text, do we have a radius for the lines?

[Thanhdan0811]

@tung13041996
https://codesandbox.io/p/sandbox/skeleton-html-css-viivue-yc2kqx
I have changed style follow your requests. you can check again.

[tung13041996]

@Thanhdan0811

index.html.-.nodebox.-.CodeSandbox.-.Google.Chrome.2025-10-08.15-03-24.mp4

When I add real content and an image to your code, the image still has animation. With text, it seems buggy. The text is cut off now

[Thanhdan0811]

@tung13041996 I have made some change to hide skeleton when have content. you can check again.

[tung13041996]

@Thanhdan0811
Please make a demo with/without image/text to see the difference

[Thanhdan0811]

@tung13041996 I have added more demo. you can check again.

[tung13041996]

@daomapsieucap
Please check the skeleton to make approval for this style

[daomapsieucap]

@tung13041996 @Thanhdan0811 The style looks good to me. Please proceed to the next step.

Don't forget that the loading animation for text is mainly used when the callback font is loaded which is mentioned in this article: https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/

[Thanhdan0811]

@daomapsieucap , I have update skeleton also into atomic. detail in here : #47 (comment)
About animation when font is loaded, Tung will confirm later to decide how to process it.