Solution

To use and create a loader in styled components, you can use animation and @keyframes it will create ui which rotates 360 deg and look like as a loader.

Snippet

In this snippet, we will use styled components, with animation, @ Keyframes, and -WebKit to make styled loader components.

const Loader = styled.div`
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;

  @keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }`;

Example

In this example, we will styled componets library and create loader using styled css with animation, @keyfrem, -WebKit. then use loader in as the components in react ui and put loader icon with on loader component.

Let’s start coding…

App.js

import styled from 'styled-components';

const Loader = styled.div`
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;

  @keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }`;


const Example1 = () => {
  return (
    <div>
      <Loader>
        <p>Loading content...</p>
      </Loader>
    </div>
  );
};

export default Example1;

Output

loader

Here, we are provided code sandbox links for the above program use loader in styled components. then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.