Skelton Loader

jitesh208
Jan 13, 2026 4
Live Preview

Live Editor

<container>
  <line id="l1"></line>
  <line id="l2"></line>
  <line id="l3"></line>
  <line id="l4"></line>
  <box></box>
</container>
:root {
	--bg-dark: #151411;
	--bg-light: #24221d;
	--acc-p: #95d5b2;
	--acc-s: ;
	--highlight: ;
	
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
}
body {
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	background: #2f3133;
	
}
container {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1rem;
	height: 25rem;
	width: 25rem;
	border-radius: 2rem;
	padding: 4rem 2.5rem 4rem 2.5rem;
	background: var(--bg-dark);
	
}
line {
	display: block;
	height: 2rem;
	border-radius: 0.75rem;
	background: linear-gradient(to right, var(--bg-light) 60%,rgba(255,255,255,0.4) 80%,var(--bg-light) 100%);
	background-size: 200%;
	background-position: 0% 0%;
	animation: pulse 1s ease-in-out infinite;
	
}
box {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 0.75rem;
	background: linear-gradient(to right, var(--bg-light) 50%,rgba(255,255,255,0.4) 75%,var(--bg-light) 100%);
	background-size: 200%;
	background-position: 0% 0%;
	animation: pulse 1s ease-in-out infinite;
	
}
#l1 {
	width: 100%;
	
}
#l2 {
	width: 8rem;
	
}
#l3 {
	width: 15rem;
	
}
#l4 {
	width: 10rem;
	
}
@keyframes pulse {
	100% {
	background-position: 200% 0%;
	
}

}
Categories

Skelton Loader

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
