DEV Community

Cover image for Adding Loaders to React using Chakra UI
Suraj Vishwakarma for Documatic

Posted on

Adding Loaders to React using Chakra UI

Introduction

There are various components in a modern website. We try to implement those that are necessary and often forget some components. This component is necessary for accessibility. Loaders are that component. Loaders will let tell the user that some processing is going on. In this way, they don't feel like changing the web page if nothing is shown.

We are going to implement different loaders in a React application. This loaders component is provided by Chakra UI. It generates things to include for this article for the React-based framework. It is the best library for having UI components. You can easily customize it according to your theme.

In this article, we are going to implement the following loaders:

  • Progress bar
  • Circular Progress
  • Spinner
  • Skeleton Loading

Installing Chakra UI to React

If you initialize the project, then you can use a code template for installing React with Chakra UI.

Here is the command:

npx create-react-app my-app --template @chakra-ui
Enter fullscreen mode Exit fullscreen mode

For manual installation to an existing React project, you can run the below command.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Enter fullscreen mode Exit fullscreen mode

In this method, we also need to set up the ChakraProvider at the top of our app.

In the index.js file add the following code:

import * as React from 'react'

// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react'

function App() {
  // 2. Wrap ChakraProvider at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now, let's add a loader to the application.

Progress bar

For the prgoress bar, we have a Progress component from Chakra UI. You can import it with the below code.

import { Progress } from "@chakra-ui/react";
Enter fullscreen mode Exit fullscreen mode

Use the component as:

<Progress value={10} />
Enter fullscreen mode Exit fullscreen mode

The value denotes the loading percentage. You can use a state to change as per loading. Also, you can create an Animated progress bar that will not require any value. It will be just loading again and again.

Here is the code:

<Progress size='xs' isIndeterminate />
Enter fullscreen mode Exit fullscreen mode

You can take a look at the examples here:

Circular Progress

Circular progress is the same as the progress bar but in the circle. You can import the CircluarProgress from the Chakra UI library.

Use the component as:

<CircularProgress value={80} />
Enter fullscreen mode Exit fullscreen mode

This will produce the circular progress with the loaded percentage as 80. You can add a text denoting the loaded value inside the circle with CircularProgressLabel component.

Use the component as:

<CircularProgress value={40}>
  <CircularProgressLabel>40%</CircularProgressLabel>
</CircularProgress>
Enter fullscreen mode Exit fullscreen mode

You can create an infinite loading circle with the props isIndeterminate inside the component. It is the same as the progress bar.

Use the component as:

<CircularProgress color="purple" isIndeterminate />
Enter fullscreen mode Exit fullscreen mode

Note: You can give different colors to the loaders with color props.

You can take a look at the examples here:

Spinner

The spinner is quite the same as an infinite circular loading screen. The only change is the animation. In the spinner, it is constant.

Use the component as:

<Spinner />
Enter fullscreen mode Exit fullscreen mode

You can give different props such as thickness, speed, color, and empty color.

<Spinner
  thickness='4px'
  speed='0.65s'
  emptyColor='gray.200'
  color='teal'
  size="xl"
/>
Enter fullscreen mode Exit fullscreen mode

Speed is the time to complete one circular animation. It takes in as seconds unit. emptyColor is the color of the empty area while color is the loading spinner color.

Note: You can give size prop to any loader to adjust the size of the component.

You can take a look at the examples here:

Skeleton Loading

The most interesting loading component is this one. It is now being used by most modern websites. There are three components for skeleton loading:

  • Skeleton: It is for loading a div that takes some space on the webpage.
  • SkeletonCircle: It is for loading a circle object.
  • SkeletonText: It is for text loading.

You can import all from the library.

Skelton

For the skeleton, we just need to provide the height props for the height of the div.

Use the component as:

<Skeleton height="100px" />
Enter fullscreen mode Exit fullscreen mode

SkeletonCircle

It is the same as the Skeleton but the div is the circle. You can adjust the size of the circle with size props.

Use the component as:

<SkeletonCircle size="50" />
Enter fullscreen mode Exit fullscreen mode

SkeletonText

Add the SkeletonText for loading the text. You can add the number of lines and skeleton height.

Use the component as:

<SkeletonText noOfLines={4} skeletonHeight='2' />
Enter fullscreen mode Exit fullscreen mode

You can take a look at the examples here:

Conclusion

We have taken a look at different loading components that are provided by Chakra UI. This loading component will be enough for any website to implement a loading screen. I use Chakra UI for building my components. It is quite easy to install and use. Along with the loading screen, I will also recommend you look into other components of Chakara UI.

I hope the article has helped you in understanding the different loading screens of Chakra UI. Thanks for reading the article.

Top comments (5)

Collapse
 
franakimiles profile image
Franakimiles • Edited

Mlsdev use the latest technologies and frameworks to create high-quality software solutions that meet our clients’ needs. Our services include custom software development, web and mobile app development, UI/UX design, DevOps, and more. We also provide maintenance and support services to ensure that our clients’ applications are running smoothly.

Collapse
 
surajondev profile image
Suraj Vishwakarma

Glad that you like it

Collapse
 
danireptor profile image
Daniel Bemsen Akosu

Nice work. I’ve used all except Progress bar I’ll try it out, thanks for sharing

Collapse
 
surajondev profile image
Suraj Vishwakarma

Awesome that you like it

Collapse
 
surajondev profile image
Suraj Vishwakarma

What kind of loaders do you use?