Up next in 10
Angular ngx-spinner Example to Show Loading Spinners as Overlay in Browser Using TypeScript
1 views
Jun 13, 2025
Get the full source code of the application here: Official Website: https://freemediatools.com
View Video Transcript
0:02
uh hello guys welcome to this video so
0:04
in this video I will show you a angular
0:06
package if you want to show a spinner
0:09
loading progress bar as a overlay as
0:12
soon as you load your application so let
0:15
me show you the demo here so as soon as
0:16
you load your angular app this overlay
0:19
will show like this loading spinner you
0:22
may say progress bar so this is nice
0:26
little animation will show after that
0:28
your application will load so I will
0:29
show you this module here so first of
0:32
all the name of the module is ngx
0:35
spinner so if you go to npmjs.com
0:40
just search for this module which is ngx
0:44
spinner
0:46
so it actually supports spinners up to
0:48
50 different types so the command is
0:50
simple you execute this command to
0:52
install this package it's almost having
0:55
127 weekly downloads,000
0:58
so it's a pretty popular package and uh
1:02
it also offers a demo as well where you
1:05
can see all these options so this is a
1:08
different loading progress bar you can
1:09
see the spinner so it supports different
1:12
options here you can check out their
1:13
documentation you can also change the
1:15
color as well using this color picker
1:20
you can set the progress bar to any
1:22
color this loading progress bar you can
1:25
disable the full screen mode so it will
1:28
only appear in the certain window you
1:30
can set the size to small if you want
1:33
the spinner to be small you can set this
1:35
so it provides you with this custom
1:38
component here which it supports various
1:41
options in the drop down here the
1:44
spinner types different shapes
1:46
directions are supported here you will
1:47
see that so here from the drop-down you
1:51
can set all the options so it's a fairly
1:56
good library for showing a spinner as a
1:59
overlay so now to get started it's very
2:01
easy to implement this module so first
2:03
of all you need to go to this app
2:05
domodule.ts file of your angular project
2:08
and first of all you need to rem uh
2:11
inside this file
2:14
you need to require this module so
2:18
import ngx spinner module from ngx
2:21
spinner you import this and then go to
2:23
the imports array and then simply add
2:25
this so this is all the configuration is
2:28
done and now you need to go to the HTML
2:31
file and right here I will show you step
2:33
by step so you can define all your
2:37
website data so in this example I'm just
2:40
showing a simple paragraph that
2:46
so now to show the spinner we simply use
2:49
this component ngx spinner opening and
2:52
closing tag so by default if you load
2:55
this application this spinner will show
2:57
like this so now it supports various
3:00
options here you can pass
3:04
so the first option you can pass is the
3:08
the color of the spinner so here you can
3:11
set this to RGBA
3:14
and then it also supports the size here
3:17
so medium you can give the color of the
3:19
spinner you can set it to a hexa decimal
3:23
code and the type of the spinner these
3:26
are all the options it supports so you
3:29
can check out the documentation to
3:30
actually see all the loading types
3:34
so once you do this so now you will see
3:37
till it appears like this
3:42
and then inside this we can also show a
3:45
message
3:47
like loading so it appears like this
3:52
we can change the color here to yellow
3:55
so
3:59
so in this easy way it appears for
4:03
2 3 seconds and then your website
4:07
content shows you can even control you
4:10
can see it appears for 2 seconds because
4:12
we are passing here 2,000 milliseconds
4:14
so if I change this to 5,000 now it will
4:17
appear for 5 seconds and then your
4:19
website data will show so here we are
4:22
defining inside this ng oninit function
4:25
this is your life cycle method of your
4:28
angular project as soon as it
4:29
initializes we showing the spinner here
4:32
and we are also importing this uh
4:35
spinner service here you need to add
4:37
this import line right here at the top
4:40
and then we are passing this service to
4:42
this constructor of your angular we are
4:44
defining this variable private spinner
4:46
of the type ngx spinner service and then
4:49
we are using this show function to show
4:51
the spinner
4:53
and then for after 5 seconds we are
4:55
hiding the spinner so like this so it's
4:58
a fairly simple module easy to integrate
5:01
so if you want to show a loading
5:03
progress bar inside your angular
5:05
application you can use this module and
5:08
also check out my website
5:10
freemediatools.com
5:12
uh which contains unlimited tools
5:14
regarding audio video and image and I
5:17
will be seeing you in the next live
5:19
stream