Loader Create a loading spinner to manage loading states across the app

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

Build a Loading Spinner

file_type_js_official components/Loader.js
// Loading Spinner
export default function Loader({ show }) {
  return show ? <div className="loader"></div> : null;
}
file_type_css globals.css
.loader {
  border: 10px solid var(--color-bg); 
  border-top: 10px solid var(--color-blue); 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Q&A Chat