Dan Powell

Dan Powell

← Back to home
Preview of FB Flat Loading Shimmer
View on CodePen ↗

FB Flat Loading Shimmer

This well-seen loading bar does a few things effectively.

  1. It acts as a great placeholder that affords the absence of data to not wreck or drastically ch ange the view.
  2. It includes animation signifying that information is coming.
  3. It looks pretty neat.

How it works: A single wide rectangle has a linear gradient of various shades of grey. This is animated with a simple @keyframes that cycles the background position from far left to far right and back again. There are then various smaller white rectangles placed on top of the animated grey background that cut away to create the illusion of type.

Another note: The asymmetrically colored border gives an awesome almost shadow. Nice and super flat.