Creating a Loader Component in React
This tutorial teaches you how to create a simple Loader component in React using Tailwind CSS for styling.
Creating the Loader Component
We start by defining our Loader component. This component doesn't receive any props.
const Loader = () => {...};Returning the JSX
Inside our component, we return a div that contains another div. The outer div is a flex container that centers its children. The inner div is styled to look like a spinning loader.
return (
<div className='flex justify-center'>
<div className='w-12 h-12 border-t-red-800 border-slate-900 border-4 rounded-full animate-spin'></div>
</div>
);Exporting the Loader Component
Finally, we export our Loader component as the default export of our module.
export default Loader;Complete Code
Here is the complete code of the Loader component.
const Loader = () => {
return (
<div className='flex justify-center'>
<div className='w-12 h-12 border-t-red-800 border-slate-900 border-4 rounded-full animate-spin'></div>
</div>
);
}
export default Loader;