Up next in 10
Build a React.js Animated Preloader Loading Screen For App Using react-preloading-screen Library
Jun 3, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys uh welcome to this video
0:02
so in this video I will show you a
0:04
ReactJS package which actually shows you
0:06
this loading screen for any amount of
0:09
time you can control everything you can
0:12
show this loading please wait kind of a
0:14
preloader screen in starting of your
0:18
application so let me show you you can
0:20
control the timing of it uh as you can
0:23
see this is a preloading screen
0:25
preloading means that
0:27
uh uh the starting of something let's
0:32
suppose you have an app application you
0:34
need to show some kind of a loading
0:36
screen beforehand to the user so this is
0:40
actually the pro preloading loading
0:42
screen pre-loading is actually the stage
0:45
where you actually show the loading
0:46
screen so you can actually animate this
0:49
everything you can control each and
0:51
every property phone size text aligning
0:54
width
0:55
and we can style it with all these CSS
0:59
properties and here you specify the
1:01
fading duration so this is the amount of
1:05
millisecond that you can control here so
1:07
here I am passing here 2,000 millisecond
1:11
but if I change it to five 5,000
1:13
millisecond so now what happens if you
1:16
see if I refresh the application you
1:17
will see the loading screen will be
1:19
there for 5 seconds and then
1:20
automatically it will go away and this
1:23
will be my main app so this is this is
1:27
called as pre-loading screen so I will
1:29
show you a react component which allows
1:31
you to customize everything about your
1:34
pre-loading screen so there is a package
1:36
here it's a very useful package because
1:39
if you need to have some kind of a
1:41
pre-loading or loading screen of your
1:43
application so uh let me show you the
1:46
package here which is react preloading
1:49
screen if you go to npmjs.com just
1:52
search for this package which is
1:55
react
1:58
preloading screen so this is actually
2:01
the package that I'm talking about you
2:04
simply need to install this first of all
2:06
by executing the command npm react
2:09
preloading screen i've already installed
2:12
it it's a fairly new package but uh it
2:15
basically provides you with a minimal
2:17
setup that is required for having a
2:19
pre-loading screen for your application
2:21
so now to get
2:23
started you first of all just create a
2:26
simple functional component and then we
2:28
simply require the necessary packages
2:31
using the import statement so we simply
2:35
import the
2:37
preloader and the
2:42
placeholder from React preloading screen
2:47
after that we also import the CSS file
2:50
as well so
3:02
react and from this we just need to say
3:13
RAF so after
3:15
this there will be two content first
3:19
will be the preloading content and the
3:21
second one will be for the main
3:24
content so right here this will be the
3:27
main content so what I will do is that I
3:30
will rename this
3:31
to main content so this will be the main
3:34
content of the application so right here
3:38
we will
3:40
simply here you can replace your main
3:42
application so whatever application you
3:44
are building replace it there so this is
3:47
my main application so I will simply say
3:49
to the user that welcome to my app your
3:52
content is now loaded so this is the
3:54
main content now before that now we need
3:58
to show the pre-loading or loading
3:59
screen so right here we will have
4:03
another component class app
4:11
extends so right here in the render
4:19
function so we use this preloader
4:23
component
4:27
so as you can see this
4:32
preloader this is actually a
4:36
component which contains
4:39
uh the placeholder and the main
4:43
content so first of all it actually
4:46
takes some properties here that we can
4:48
pass first property is the
4:51
fade
4:53
duration so here you can control
4:55
everything so let's suppose I say 5,000
4:58
millisecond and then we simply pass the
5:01
class name you can even customize it by
5:04
passing a custom class name as well so I
5:08
will pass this custom preloader and we
5:11
can even give inline styles as well like
5:14
this we can style this by using uh
5:18
custom CSS properties so I'm just
5:20
passing it various CSS properties here
5:26
and then we come the main content so
5:30
right
5:33
here this will be the main content right
5:39
here so here we are including this main
5:41
content that we defined earlier on so
5:43
this will be the main content after this
5:46
main content we will have the
5:54
placeholder so this will be the loading
5:57
screen that you
5:59
see so you can design your own loading
6:02
screen as well and just place it inside
6:05
this closing and opening and closing tag
6:08
of placeholder so this will be the
6:10
loading screen that you will see you can
6:11
customize everything here loading please
6:14
wait
6:16
uh that's all so this completes your
6:19
application and if you try to
6:22
look uh it is saying that unex
6:25
unexpected
6:32
token need to quick fix
6:47
Uh I think we made some kind of a
6:50
mistake
6:53
here oh sorry this needs this need not
6:57
have to be
7:00
there so that's come so now it will
7:03
appear for 5 seconds the loading screen
7:05
and then automatically it will go away
7:07
and this will be your welcome to my my
7:10
app so this is really useful guys if uh
7:13
inside your application you do need to
7:15
show some kind of a loading and
7:16
preloading screen this will be a nice
7:18
little package for your ReactJS
7:20
application you can customize
7:23
everything using the CSS custom CSS you
7:26
can provide each and every property so
7:29
it's a good package react pre-loading
7:32
screen simply install this and then
7:34
define your main content then your
7:36
preloading content like this so thank
7:39
you very much for watching this video
7:41
and uh also check out my website
7:44
freemediattools.com
7:46
uh which contains thousands of tools
#Programming
#Software