Skeleton Loader Block
ReactJS
Easy
5 views
Problem Description
Create a skeleton block component to show loading UI.
Output Format
Render a React component.
Constraints
Make it reusable with width and height props.
Official Solution
import React from 'react';
export function Skeleton({ width = 240, height = 14 }) {
return (
<div
style={{ width, height, borderRadius: 999, background: 'linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb)', backgroundSize: '200% 100%', animation: 'shimmer 1.2s linear infinite' }}
/>
);
}
export default function App() {
return (
<div style={{ padding: 16 }}>
<style>{'@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }'}</style>
<Skeleton width={220} />
<div style={{ height: 10 }} />
<Skeleton width={320} />
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!