Up next in 10
Angular ngx-loading Example to Show Loading Spinner & Progressbar in Browser Using TypeScript
Jan 26, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-loading-example-to-show-loading-spinner-progressbar-in-browser-using-typescript/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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 how to
0:04
show a loading progress bar or a spinner
0:08
when you fetch some data in angular
0:09
you'll see this is actually a package as
0:12
soon as I click the button you will see
0:14
this loading progress bar a spinner
0:16
appearing for 1 second you can control
0:18
this
0:19
duration uh it is appearing for 1 second
0:22
I can change it to 3,000 millisec so it
0:24
now appears for 3 seconds so you can
0:26
control it how much how much time it PS
0:30
on the screen you will see that so all
0:32
there is actually this package here if
0:35
you search on npmjs.com
0:39
the name of the package is
0:42
nx- loading so this is actually the
0:45
package
0:46
here uh I've already installed it so you
0:49
will see uh this is actually the command
0:52
here uh it's almost having 13,000 weekly
0:55
downloads
0:56
so I have written a complete step
0:58
by-step blog post how to use this if you
1:01
need this full source code of this
1:02
example you can go to the description
1:04
link so first of all I will delete
1:07
everything and start from
1:13
scratch so you can just see we are
1:16
starting it from scratch so the very
1:18
first file you need to edit is your app.
1:21
module. TS file this is the file and
1:24
here you need to require this module by
1:28
using the import statement so we simply
1:30
say
1:31
import
1:32
ngx
1:35
loading module and this will be coming
1:37
from this package which is ngx loading
1:40
so we require this and then we import
1:43
this inside this Imports array so we
1:45
simply
1:46
import this
1:48
module and after this we close this file
1:51
and then we move to this app. component.
1:54
HTML file so wherever you need to
1:57
display this loading spinner you simply
1:59
use this directive ngx
2:05
loading and it actually takes some
2:08
options right here the very first option
2:10
is takes is the show parameter it's a
2:13
Boolean act value either it's true or
2:16
false if I make it true you will see the
2:19
loading spinner will display the default
2:21
styling is white color if you see the
2:24
loading progress bar is white in color
2:26
the spinner and uh it also takes second
2:30
parameter is the
2:32
configuration and here you can pass an
2:34
object right here which specify more
2:37
details about this progress bar so we
2:39
can declare this object which is loading
2:42
config in our typescript so just move to
2:45
this and here we can diff just display
2:49
declare this object loading
2:50
configuration so this actually contains
2:52
an object which here you can specify the
2:56
primary color of the spinner the
2:58
tertiary color
3:00
so here you can just customize the look
3:02
and feel you will see three colors are
3:04
there in this spinner if you closely
3:07
notice this is the first color Second
3:09
Color third color so here we specify the
3:12
properties here primary color secondary
3:14
color and tertiary color so you can give
3:17
your the hexadecimal code values and
3:19
just customize it and if I change it to
3:22
false here you will see that now the
3:24
loading progress part will not display
3:26
so here what we can do we can declare a
3:29
property inside
3:30
typescript of loading so by default we
3:34
can directly pass instead of true or
3:37
false we can pass this property this
3:40
variable so here we can specify this
3:44
loading Boolean parameter so now it will
3:47
not display if I change it to true so
3:50
now it will
3:51
display so what I will do
3:54
uh on button click we will display this
3:58
spinner so inside our HTML we will have
4:01
a
4:03
button so
4:06
just at the top here we will have a
4:09
simple div
4:13
section and here you'll be having two
4:17
buttons first button will be displaying
4:20
the spinner and the second one will hide
4:23
it so we need to Define these two
4:25
functions on button click show loading
4:27
and hide loading so we come to the the
4:29
typescript code so here we specify this
4:33
function show
4:35
loading and here we simply make this
4:38
loading to from false to true so as soon
4:41
as you do this and also we need to
4:43
define the hide
4:47
loading so as soon as you click the
4:49
button we will see the progress file
4:51
will
4:52
show so now we can control this how much
4:55
time it should display so for this we
4:57
can use the set timeout function of
5:08
JavaScript and here we can
5:11
specify this loading you can again
5:14
change height this by making this this
5:17
loading to false and I need to do this
5:20
after 1 second so here I provide
5:24
1,000
5:26
millisecond so this means that
5:31
after 1
5:39
second so you see that after 1
5:43
second automatically the
5:47
spinner hide itself
#Internet Software
#Computer Education