Up next in 10
React.js Project to Show Colorful Loading Spinners & Progressbars Using react-loader-spinner Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a package
0:04
specifically designed for reactjs
0:06
applications so if you want to show a
0:09
loading progress for inside your reactj
0:12
application while you fetch data from a
0:14
rest API or database you can show these
0:18
nice little loaders or
0:21
loading progress paths to the user it
0:24
can be in any shape you can change the
0:26
background color and color of these
0:28
progress Parts as well so I will show
0:30
you this package uh specifically there
0:33
react loader spinner this is actually
0:37
the package name and if you just go to
0:40
npmjs.com and just search for this
0:42
package react
0:45
loader
0:47
spinner so this is actually the name of
0:49
the
0:50
package it already got
0:54
26,000 weekly download it's a pretty
0:56
popular package so this is actually the
0:59
command here uh just need to install
1:01
this using this I've already installed
1:03
it
1:05
so they do have their own homepage as
1:07
well where the this is called a react
1:10
Spinners so they have a nice little
1:13
documentation which basically tells you
1:16
all the types of progress pass loading
1:19
pass that it supports in various shapes
1:22
so it is audio ball triangle blocks
1:26
circles comment if you see all these are
1:31
supported
1:33
fidget so all sort of shapes of progress
1:37
paths if you want to show progress
1:40
for this is your magnifying glass
1:46
radio so it is a nice documentation it
1:49
has so now to actually integrate inside
1:53
your react Chas project I will show you
1:56
a very basic
1:58
example so first of all what we need to
2:01
do uh we just need to require this
2:03
package so right here just make a simple
2:06
functional component and just include
2:10
the package using the import
2:13
statement so we can directly inside the
2:17
div right here the
2:18
jsx I will just change this to display
2:22
to flex so that it appears in the center
2:25
position so justify content to Center so
2:29
inside this we will display the progress
2:31
bar so we will use first of all the
2:34
audio progress bar which will be coming
2:36
from this you can see react loader
2:39
spinner so we'll be displaying this
2:42
progress bar so it takes some options
2:45
first is the height of the progress bar
2:48
you can give let's suppose 80 and then
2:50
it also takes the width as well so let's
2:53
suppose I give it 80 as well then it
2:56
takes the radius of
3:01
the I will give it as nine progress for
3:06
and here you can change the color as
3:07
well so I will put it
3:09
red a red color I want and then the area
3:13
label so this is actually the class
3:16
three dots
3:18
loading and then it takes these options
3:21
rappers
3:26
class and rapper Style
3:33
so this
3:34
is three dot loading this is actually
3:36
the class if you go to the browser
3:39
now you will see this uh red color
3:44
progress bar will be there this loading
3:46
bar
3:48
spinner and if you change the color here
3:50
from red to blue so you can see the
3:53
color will
3:57
change so in this way we have ious
4:00
shapes of spinners available to us so
4:03
one such as ball
4:06
triangle again we pass the same options
4:09
height width
4:15
radius so it will look something like
4:18
this this is actually a ball
4:21
triangle and similarly we also have the
4:24
comment as well so if the user is making
4:27
a comment you can show that progress
4:29
part
4:40
we just need to import this so
4:50
comment so you can see so whenever
4:53
someone typing a message basically you
4:56
have seen these Spinners appearing in
4:59
the chat box so it's very helpful uh
5:03
this package contain all these Spinners
5:05
loading progress parts that you can show
5:07
to the user when they do something on
5:09
the application it's really useful and
5:12
you can check the documentation as well
5:15
for a certain type of progress PA that
5:17
you need for a certain type inside
5:20
whatever the user is doing so depending
5:22
upon that you can show these nice little
5:25
Spinners progress PA so all types are
5:28
available you can check the
5:30
documentation you can
5:33
see same options we provide the width
5:36
height visible you can change the color
5:38
background color all these
5:40
things are typically the same so it's
5:44
very easy to
5:45
integrate and uh very simple you can
5:50
see so this was actually the module for
5:54
showing Spinners and progress path
5:56
specifically designed for react CH
5:58
applications
6:00
so it only works in react CH application
6:02
so this is the main part of it so thank
6:05
you very much for watching this video
6:07
and do check out my website as well free
6:10
mediat tools.com which contains
6:13
thousands of tools regarding audio video
6:15
and M and I will be seeing you in the
6:17
next video