React by Patrik

How-To Create a Loading Spinner in React using CSS

In this Snipp we show how to create a loading spinner component in React JS using pure CSS.

1. Create the React component to display the spinner

// Spinner.jsx
import React from "react";
import "./spinner.css";

export default function Spinner() {
  return (
    <div className='container'>
      <div className='loader'></div>
    </div>
  );
}

2. Add CSS styles for loading spinner animation

/* spinner.css */
.container {
    display: grid;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 1s linear infinite;
}

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

Additional Resources: