5 results

Preview
Fade Lift
Appear and lift slightly
Preview
Ken Pan
A surface that slowly enlarges
Preview
Pulse Dot
A pulsing status dot
Preview
Shimmer Line
A loading shimmer bar
Preview
Spin Loader
A spinning ring loader

Shimmer Line

A loading shimmer bar

Preview

PaletteDarkMonoWarm

HTML

<p>Loading catalog</p>
    <div class="line"></div>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

p { margin: 0 0 0.7rem; font-weight: 700; }

.line {
  width: min(100%, 16rem);
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--line) 0%, var(--paper) 45%, var(--line) 90%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}