UI Skeleton Gallery
A free customizable collection of SVG skeleton loader UI elements for design wireframes & mockups.
Basic Elements
Avatar
Button Primary
Button Secondary
Input Active
Input
List Closed
List Open
Loader
Headings & Text
Heading 1
Text Body 1
Text Body 2
Text Body 3
Cards & Sections
Card
Card 2
Card 3
CTA Section
Reviews
Review 5 stars
Review 5 stars
Review 4.5 stars
Review 4.5 stars
Review 4 stars
Review 4 stars
Review 3.5 stars
Review 3.5 stars
Review 3 stars
Review 3 stars
Review 2.5 stars
Review 2.5 stars
Review 2 stars
Review 2 stars
Review 1.5 stars
Review 1.5 stars
Review 1 stars
Review 1 stars
Media Files
Image 1:1
Image 4:3
Image 16:9
Video 1:1
Video 4:3
Video 16:9
File 1:1
File 4:3
File 16:9
Frequently Asked Questions
What is a UI skeleton element?
A skeleton element is a UI element or screen that doesn't contain actual content but instead offers a low-fidelity page wireframe before content completely loads.
UI skeleton elements are also used on low-fidelity wireframes to showcase the user flow in early design stages.What's the benefit of using a UI skeleton element instead of a spinner?
In many cases (eg. when fetching data from a server), the data for your elements might not be immediately available.
You can improve the perceived responsiveness of the page by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screenWhich are the best use case for UI skeleton elements?
The UI skeleton elements are perfect for wireframes, mockups, loading screns, and empty-state screens.
Can I import the elements on Figma or Sketch?
Yes, of course. You can simply copy any element and simply paste them inside your favorite design tool.
