Up next in 10
React.js react-sweet-progress Example to Make Awesome Loading ProgressBars in Browser
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 we will look at a library
0:05
example in react chairs to construct
0:07
progress bar or this loading bars
0:10
stylish loading loading bars if you can
0:12
see it can be in any shape horizontal
0:15
circular you will see we have different
0:18
progress parts right here you can
0:20
animate this using this nice little
0:23
animation that is going on it's a linear
0:25
progress circular progress it has
0:27
customized themes as well you can has
0:29
various icons as well so the name of the
0:31
library is react suet progress if you go
0:34
to npmjs.com just search for this module
0:38
which is react
0:40
Suite progress so this is actually the
0:43
name of
0:44
the
0:46
library and it is almost got 14,000
0:49
weekly downloads so it's a
0:52
pretty good
0:54
Library so I will show you step by step
0:58
examples of this so first of all we will
1:02
import the actual library at the top
1:05
progress which will be coming from
1:10
react
1:11
Suite
1:13
progress and also we need to include the
1:16
CSS file of this Library as well for
1:19
getting the Styles react Suite progress
1:22
and contains a library folder inside
1:25
this we have style. CSS
1:31
now we'll be creating a very simple
1:33
functional
1:40
component so right here uh in the
1:47
jsx so what we need to do inside this
1:50
div we basically give it
1:52
a padding of uh 20
1:57
pixel so inside this we'll have an H to
2:00
heading which will say
2:02
react site progress
2:06
example so the very first progress bar
2:09
which we have normally is your
2:11
horizontal progress bar so for doing
2:15
this it is actually called as linear
2:17
progress
2:19
bar so what we do basically we have a
2:23
progress bar we can how to use this so
2:26
we include first of all the progress it
2:29
takes some options first is the
2:31
percentage so how much percentage you
2:33
want to give so let me give 50% and then
2:36
the status either it can be active or
2:40
non-active so I'll will be giving these
2:42
two options the percentage of the
2:43
progress bar and the status so if you
2:46
refresh your browser it will look
2:48
something like
2:52
this uh I think some error has taken
2:55
place active is not defined I think it
2:59
is saying active is not
3:02
defined sorry this needs to be in double
3:04
quotes it's a string
3:09
value so if you see now we have this
3:13
progress part it is reached up to 50%
3:16
and in this way you can show a linear
3:18
progress part and same goes with the
3:21
circular one
3:24
so for the circular one we change
3:31
the option here the type
3:35
option we give it a circle so by default
3:40
it will be linear but if you want to
3:42
change it to Circular you can change it
3:44
by providing this property and then you
3:46
provide your percentage let me provide
3:49
this time
3:50
75 and the state status will be for
3:53
Success
3:55
so this will be in green color you will
3:57
see that this is not percentage this is
4:01
status
4:07
so and then we can design some customize
4:10
progress bar as well so here you can
4:13
change all the options you can also
4:15
provide the
4:18
customize icons as well so first is your
4:22
percent option let me provide 90 and
4:26
then you can even provide theme as well
4:28
so here you can
4:30
provide all the options for the success
4:33
you can provide a customize symbol as
4:47
well so in this way you can provide your
4:50
own customized theme for all the success
4:53
active and default so in this way this
4:56
is your customized
4:57
theme we have changed the icon as well
5:01
so in this way guys you can use this
5:03
library to create awesome looking
5:05
progress bar and loading bars inside
5:08
react
5:11
CH and you can even customize the width
5:15
as well by providing this option of
5:17
stroked width
5:19
to8 and a width property of 100
5:23
so you can see that so this is actually
5:26
the library which is re react Suite
5:28
progress
5:30
so thank you very much for watching this
5:32
video and do check out my website as
5:34
well free mediat tools.com which
5:36
contains thousands of free tools
5:38
regarding audio video and image and I
5:41
will be seeing you in the next video
#Software
#Other