Up next in 10
Angular ngx-progressbar Example to Build Loading Animated Spinner & Progressbar in Browser Using TS
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-progressbar-example-to-build-loading-animated-spinner-progressbar-in-browser-using-ts/
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 a package
0:04
in angular G angular where if you want
0:07
to show a loading progress bar you can
0:10
see this is actually the loading
0:12
progress bar it will show loading
0:14
spinner so it may be in different forms
0:16
it may be inside this nice little this
0:19
is the mini progress bar or it can be a
0:22
circular spinner like this so you can
0:25
customize the look and feel of it you
0:28
can change the color as well so as like
0:29
click the start button you will see the
0:31
progress bar will start and we also have
0:35
the done call back function as well so
0:37
if you click this it will then hide it
0:41
you can even increment by 20% so as it
0:44
increases it will increase by
0:46
20% so we have all these there's a
0:50
package in angula so if you go to
0:52
npmjs.com and just search for this
0:55
package ngx Dash
1:01
progress part this is actually the
1:05
package so the command is simple this is
1:08
a command here and almost 22,000 weekly
1:11
downloads so this is their official
1:14
documentation website where you can read
1:16
more about it and you can try out all
1:19
these examples
1:21
so I've written a step byst step blog
1:24
post on my website and also all this
1:26
example code that I will show you is
1:28
given in the description of this video
1:31
so now to get started what I will do I
1:33
will simply delete everything and start
1:35
from
1:37
scratch so the very first thing we need
1:40
to do we need to go to this file here
1:42
app. module. typescript file and we need
1:45
to import this
1:46
module so we will just add this import
1:50
statement so we simply say import
1:54
ngx progress module and it will be
1:56
coming from this package which is ADD
2:00
nx- progress
2:04
bar so we first of all import this
2:07
module by writing this import statement
2:09
and then we come to the Imports array
2:11
and we simply import this module here in
2:16
the import
2:19
s and we also need to call the root
2:22
function
2:30
so you just need to write like this and
2:33
after that you can close this file and
2:36
come to the app. component. typescript
2:55
file so after coming to this file we can
2:59
can have different options right here
3:01
for the progress part so one by one I
3:04
will tell you so there are ease option
3:07
which is there which is linear and you
3:09
can even control the speed of the
3:11
animation which is happening so you can
3:13
give it a 200
3:16
value and we also
3:18
have trickle speed that the direction
3:21
you can even control as well so we all
3:24
have these options right here the
3:26
spinner position
3:29
so as the spinner will start it will be
3:32
there on the left position you can even
3:35
customize this as
3:37
well if I show you here the position of
3:41
the spinner if you see it is there in
3:42
the left position you can change this by
3:46
changing this property here if I change
3:48
this to right so now what happens the
3:51
spinner will appear on the right
3:53
position the progress
3:55
part and here this is the color property
3:59
so you can change to any color so let's
4:01
suppose I change to Yellow so now the
4:04
spinner change color you will see that
4:06
it appears and now the yellow color
4:08
right here so you can change any
4:13
color so this is the nice little
4:15
advantage of using this you can directly
4:18
manipulate all these properties using
4:20
this options object you can control the
4:22
speed color position everything and then
4:25
we have these two call back functions on
4:28
started and on completed so when the
4:30
progress bar starts then this function
4:34
executes which is on start and when it
4:37
completes then this function on
4:39
completed and secur so we all have these
4:42
two call back functions so right here we
4:44
can control what happens when you start
4:46
the progress bar or when you hide it
4:48
using these functions so this is
4:51
essentially the package it is very easy
4:54
to use and configure you go to the file
4:56
app. module. TS you import the package
4:59
and we Imports add this into the Imports
5:02
array and then we can directly use it by
5:04
declaring these options so if you need
5:07
the full example code the link is given
5:09
in the description you can go to my
5:10
website to get the full source code and
5:14
thank you very much for watching this
5:16
video and also check out my website as
5:18
well free mediat tools.com uh which
5:21
contains thousands of tools regarding
5:23
audio video and image and I will be
5:26
seeing you in the next video
#Internet Software
#Other