React Spinner Loader: Start/Stop Button with Animation

This code is a React application that renders a simple UI with two buttons labeled “Start” and “Stop”. The UI also includes a spinner loader animation that is displayed when the “Start” button is clicked. The loader animation consists of four circular divs with different background colors that rotate in a circular motion.

Developed By: Nawaz Danish

The code uses React hooks, specifically the useState hook, to manage the state of the isStart variable which determines whether the spinner loader should be displayed or not. The initial value of isStart is set to false using useState(false).

When the “Start” button is clicked, the onClick event triggers a callback function that sets the value of isStart to true using the setIsStart function. This causes the spinner loader to be displayed, and the "Start" button becomes disabled. Conversely, when the "Stop" button is clicked, the isStart value is set back to false using the setIsStart function, hiding the spinner loader and disabling the "Stop" button.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isStart, setIsStart] = useState(false);

  return (
    <div className="App">
      {isStart === false ? (
        <button
          onClick={() => setIsStart(true)}
          className="btn btn-primary mt-2"
        >
          Start
        </button>
      ) : (
        <button className="btn btn-secondary mt-2" disabled>
          Start
        </button>
      )}
      &nbsp;
      {isStart === true ? (
        <button
          onClick={() => setIsStart(false)}
          className="btn btn-primary mt-2"
        >
          Stop
        </button>
      ) : (
        <button className="btn btn-secondary mt-2" disabled>
          Stop
        </button>
      )}
      {isStart && (
        <div className="spinner-loader">
          <div className="loader"></div>
          <div className="loader"></div>
          <div className="loader"></div>
          <div className="loader"></div>
        </div>
      )}
    </div>
  );
}

The spinner loader animation is defined using CSS keyframes animation. The rotate animation applies a translation transformation to the circular divs, causing them to move in a circular motion. The @keyframes rule specifies the timing and duration of the animation, with each div having a different delay and background color.

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background: #111111;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.spinner-loader {
  width: 100px;
  height: 100px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader {
  border: 0;
  margin: 0;
  width: 40%;
  height: 40%;
  position: absolute;
  border-radius: 50%;
  animation: rotate 2s ease infinite;
}

.loader:nth-child(1) {
  animation-delay: -1.5s;
  background: #1199aa;
}
.loader:nth-child(2) {
  animation-delay: -1s;
  background: #f63d3a;
}
.loader:nth-child(3) {
  animation-delay: -0.5s;
  background: #fda543;
}
.loader:nth-child(4) {
  background: #258652;
}

@keyframes rotate {
  0%,
  100% {
    transform: translate(0);
  }
  25% {
    transform: translate(160%);
  }
  50% {
    transform: translate(160%, 160%);
  }
  75% {
    transform: translate(0, 160%);
  }
}

Finally, the createRoot function from react-dom/client is used to render the App component in the rootElement element in the HTML file, wrapped in a StrictMode component which helps detect potential issues in the code.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Full Code link: Link

Live: Link

Follow us: Nawaz Danish