Loading animation with React.js + styled-components
Tags: react, webdev, tutorial, programming
Published: 2021-10-08 23:25:06

![image](https://media3.giphy.com/media/ii7R0hFjKIS4poVDrk/giphy.gif?cid=ecf05e47dmfyas9vhtzawn418zb6sc3ft0uat4icacs4jp96&rid=giphy.gif&ct=g)
So here we are with another post and today I'm going to show you all a way to make a loading animation for your application with styled-components. So let's jump right to it!
![image](https://media3.giphy.com/media/iMBEgyXkFBtdCFS93i/giphy.gif?cid=ecf05e47virzefvwyfwy9xl78l55tsxzyphuyw21l6fnu5n6&rid=giphy.gif&ct=g)
### Creating a React app
**1-** First of all we are going to create a project with react and install styled-components.
```bash
# Comand to create a react app
yarn create react-app my-app
# Go to the folder you created
## And then install styled-components
yarn add styled-components
```
**2-** Second of all we create a loading component and make 2 styled elements, a LoadingWrapper and a Dot. 
*(I like to create a folder for the component and create 2 files a index file with the logic and a style file. That's the way I'm going to be doing)*
```jsx
import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot />
      <Dot />
      <Dot />
    </LoadingWrapper>
  )
}
```
**3-** Okay now we got our Loading component, so let's go to the styles we are going to be using and import then into our file.
```jsx
import styled from 'styled-components'

export const LoadingWrapper = styled.div`
  display: flex;
  align-items: flex-end;
  justify-content: center;
`

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
`
```
**4-** So what we have until now, just the word "Loading" with 3 dots on the side. Now we are going to be making the animation itself. *(You can make the animation on the same file of the style for the Loading component or create a file separated)*
```jsx
export const BounceAnimation = keyframes`
  0% { 
    margin-bottom: 0; 
  }

  50% { 
    margin-bottom: 1rem;
  }

  100% { 
    margin-bottom: 0;
  }
`
```
**5-** With the animation in hands we need to add it on the Loading styles and we can make something that's pretty cool with styled-components and that is passing props to the component. So let's go to it.
```jsx
// If you made the animation in a different folder
// you need to import it
import { BounceAnimation } from ''

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  /*Animation*/
  animation: ${BounceAnimation} 0.5s linear infinite;
  animation-delay: ${(props) => props.delay};
`
```
**6-** And last but not least add the delay prop to the Dot component in the Loading folder.
```jsx
import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot delay="0s" />
      <Dot delay="0.1s" />
      <Dot delay="0.2s" />
    </LoadingWrapper>
  )
}
```
And TADA 🎉 you have a animated Loading component just like this:
![image](https://im2.ezgif.com/tmp/ezgif-2-17433bbf9214.gif)
*mine is styled a little bit different but the animation is just like that*
Now I'm leaving...
![image](https://media2.giphy.com/media/YybKRCSHL1OBW/giphy.gif?cid=ecf05e47jeagmdwx8q3drlu6ugqge1hgrr934fnkvwjr788b&rid=giphy.gif&ct=g)
And you have a animated Loading component to use through out your applications and go crazy with it, you can use this with Typescript too if y'all want I can make another post about it, See you next time, peace!