DEV Community

Cover image for Loading animation with React.js + styled-components
Gabriel Bittencourt
Gabriel Bittencourt

Posted on

Loading animation with React.js + styled-components

image
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

Creating a React app

1- First of all we are going to create a project with react and install styled-components.

# 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
Enter fullscreen mode Exit fullscreen mode

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)

import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot />
      <Dot />
      <Dot />
    </LoadingWrapper>
  )
}
Enter fullscreen mode Exit fullscreen mode

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.

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;
`
Enter fullscreen mode Exit fullscreen mode

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)

export const BounceAnimation = keyframes`
  0% { 
    margin-bottom: 0; 
  }

  50% { 
    margin-bottom: 1rem;
  }

  100% { 
    margin-bottom: 0;
  }
`
Enter fullscreen mode Exit fullscreen mode

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.

// 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};
`
Enter fullscreen mode Exit fullscreen mode

6- And last but not least add the delay prop to the Dot component in the Loading folder.

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

And TADA 🎉 you have a animated Loading component just like this:
image
mine is styled a little bit different but the animation is just like that
Now I'm leaving...
image
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!

Discussion (0)