These square-based preloaders can add loading states to your screen or buttons.


  • --circle: rotating circle loader.
  • --bars: three vertical bars with sequenced animation.

Technical Details

  • You can customize a separate instance of any of these preloaders with CSS custom properties.
  • You can use these preloaders with buttons to display a progress state.