Angular Material Tutorial - 9 - Progress Spinner

let's take a look at the progress

spinner in this video first let's import

the module Matt progress spinner module

included in the material components

array of this module basically provides

us with two spinner components Matt

progressed spinner and Matt spinner the

first one Matt progress spinner is a

determinate spinner which has a value

attribute that can be between zero and

hundred so Matt progress spinner with

the value attribute is equal to let's go

with 40 if you take a look at the

browser you can see a spinner that is at

40% value we can also specify the value

as 0 in which case you cannot see any

spinner at all and a value of 100 which

shows the complete spinner you can also

bind to the value attribute

programmatically to indicate any

progress that has to be conveyed to the

user now a more common use case of the

spinner is the indeterminate spinner or

the spinner that never stops spinning

for that we make use of the Matt spinner

component

if we now save the file and take a look

at the browser you can see that we have

a progress winner that spins

indefinitely you would want to use this

to indicate to the user that something

is running in the background and the UI

is busy for example if you are loading

data it is a good idea to show the

spinner and then hide it when the data

has loaded let me mock the loading of

data with a button click so I'm going to

go back to AB dot component dirtiest and

create a new property

show spinner and initialize it to false

I'm also going to define a method load

data and in this method initially we are

going to set show spinner to true this

Dodger spinner is equal to true and then

we use set timeout to set it back to

false after five seconds

so error function this dot shows spinner

is equal defaults in the HTML let me use

the ng if condition with show spinner

and also create a button that calls the

load data method

and gif is equal to show spinner and a

button load data

on-click this is going to be load data

now let's go back to the browser and

initially you can see that the spinner

is hidden I click on load data and the

spinner appears this indicates to the

user the data is being fetched and after

five seconds the spinner disappears

which again can indicate that the data

has been loaded now ideally you want a

separate component with more styling

like an overlay and a z-index so that

nothing else can be clicked when data is

being loaded or even a form being

submitted and also by default the color

is set to primary color of the team but

again like other components you can set

the color attribute to accent or warn as

well so Matt spinner color is equal to

accent

and now we have an accent color spinner

so that is about the progress spinner

now similar to the progress spinner

there is also the progress bar indicator

in angular material it works almost the

same as progress spinner so I will leave

it up to you guys to experiment and

understand how it works well that is

about buttons and indicators in angular

material from the next video let's take

a look at the different components

related to navigation thank you guys for

watching don't forget subscribe I'll see

you guys in the next one