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
Links
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.
Happy Coding,
I hope the above example with help you to do your task.