This content originally appeared on DEV Community and was authored by Cath Leyson
Introduction
In modern web applications, it's common to have asynchronous operations that require some time to complete.
During these operations, it's a good practice to provide visual feedback to the user, indicating that the application is still working.
One way to achieve this is by using a loading spinner, which is a visual element that rotates to indicate that the application is processing data or performing an action.
In this tutorial, we'll explore how to create a loading spinner in React using the styled-components library.
Step 1: Setting up the Project
Before we start implementing the loading spinner, make sure you have a React project set up with styled-components installed. If you haven't already, create a new React project using your preferred method (e.g., Create React App) and install styled-components by running the following command:
npm install styled-components
Step 2: Creating the LoadingSpinner Component
In this step, we'll create a functional component for the loading spinner. Open a new file called like loading-spinner.js and import React and styled-components.
We'll define two styled components: Container and Loader.
The Container component will center the spinner on the screen, and the Loader component will represent the spinning animation itself.
Here's the styling for the LoadingSpinner component:
import React from "react";
import styled from "styled-components";
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;
const Loader = styled.div`
border-width: 0.5rem;
border-style: solid;
border-color: purple purple purple purple;
width: 3.625rem;
height: 3.625rem;
border-radius: 50%;
position: relative;
-webkit-animation: spin 2s infinite;
animation: spin 2s infinite;
&:before,
&:after {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: purple;
position: absolute;
left: 0.125rem;
}
&:before {
top: 0.063rem;
}
&:after {
bottom: 0.063rem;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
`;
//Create functional component
export function LoadingSpinner() {
return (
<Container>
<Loader />
</Container>
);
}
Step 3: Using the LoadingSpinner Component
Now that we have our component, we can use it wherever we need to display a loading state in our application. Making this reusable.
Import the LoadingSpinner component into the file where you want to use it and render it accordingly.
For example, if you have a component called MyComponent and you want to display the loading spinner while fetching data from an API, you can render it conditionally based on the loading state.
Here's an example of how I use it:
import { LoadingSpinner } from "./loading-spinner"
export function MyComponent() {
//I'm using react-query
const { data, isLoading, isError, error } = useProjects();
if (isLoading) {
return <LoadingSpinner />;
}
if (isError)//...
return (
//render the array results
);
}
Hope this helps!
This content originally appeared on DEV Community and was authored by Cath Leyson
Cath Leyson | Sciencx (2023-06-03T16:00:00+00:00) How to Create a Loading Spinner in React with styled-components. Retrieved from https://www.scien.cx/2023/06/03/how-to-create-a-loading-spinner-in-react-with-styled-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.