Progress Bar's animated Some Bottom Progress Bar's Nice Hi, everybody!

What's up?

Welcome back to CSS three and 30 days.

Today's day number 19 and we're gonna be coding in CSS three only some animated Progress Bar's Let me show you what we're gonna be making here.

In the final result, you could see we got two examples we got example one and two we got Ah, this really interesting looking now a progress bar that slides up to about 60%.

In fact, it slides exactly to 60%.

And it has this, like, kind of like a barbershop.

You know, stripey animated effect going on and it's it's set within and kind of looks like an inset like, uh, parent container with an insect shadow.

So it has this really cool three dimensional effect.

Cem rounded corners.

It slides all the way up to 60% goes back resets, and an example to the interesting thing about this one is that it goes 2 100%.

But the thing is, it has a little tool tip that follows it to let you know it's loading or whatever you want to put in that.

So we're gonna be making those.

It's relatively straightforward.

We're gonna be messing around with some animations again and some key frames.

So hang tight.

Let's jump in our code.

Editor, open up Number 19.

Animated Progress Bar's Get yourself set up.

Ready to go and let's hang out for the next 20 minutes or so and see what kind of trouble we can get ourselves into.

All right, so here is the index file is going to show you the markup, Riel.

Quick looks a little bit like this.

So example one we got animation bar one.

That's our class in there.

We have a span with the style of with 60% simply just means the width of that container.

60%.

We're gonna be animating it to its its maximum wit and example.

Number two with a span with a data label attributes.

Ah, that says loading.

We could have made that say, just title or even Ault.

But we're gonna be using data label instead.

And we're gonna be using the text in there just saying loading it could be whatever you want it to be.

So that's it for the markup.

Something to the sandbox and get started.

Let's start out with the animation bar One We're gonna say position, relative display block and we go patting five pixels Font size 16 pixels.

Again, this is all just housekeeping stuff Line height, 16 pixels.

Border radius.

We're gonna make it 30 pixel.

So pretty rounded background rgb a and it's gonna be 0.1.

So an almost invisible black box shadow inset.

And we're gonna say zero one pixel, two pixels RGB a 0.25 Okay, But we're also gonna add another shadow that if I left it like so let's see what happens.

So looks pretty good as is.

But if I would also add 01 pixel rgb a and then 255255255 and then zero point one.

See what that does that adds a It's hard to see, but what I'm doing here is I'm adding a little bit of a highlight on the bottom.

Maybe if I make it more prominent, you should be able to see it.

So let me just make it like one.

So it's a straight up white line at the bottom.

You could see, just gives it a little bit more depth.

So let's make it actually, kind of like it.

Pretty Bracelets to 0.8 on that one.

Okay, that looks pretty good.

Now, what we're gonna do is we're gonna stall that span within it.

We're gonna say animation bar one spans.

We're gonna style that up.

There is a position.

Relative display.

So this is the progress bar within the container that were styling up here in line block.

We're gonna save vertical align Middle one of stay in the center.

Their height 20 pixels.

Border radius, Uh, 10 pixels on the top, zero and zero.

So that zero on the right, zero on the left.

They're on the right, there on the bottom, 10 pixels on the left.

So 10 pixels of border radius on the top and then left.

And we're going to say overflow, hidden background color.

We're gonna say F 56 92 background size.

100%.

We're gonna be playing around with a background image, which is why we want to use backwards eyes.

Okay, Now we're gonna create a Grady in, so let's just let me just take that for a sec and just see what we've come up with.

So it's just a pink progress bar.

The border radius is on the top and on the left.

Because if I take it out, it looks like this.

It's a square, and I don't want it on the right side.

So I'm gonna put that back, save it, and I'm gonna keep the right side square the left side round it.

So it fits nicely within its parent container and overflow hidden because we're gonna have a We're gonna have something going on within the inside of that.

So I'll show you in a moment, um, background size, 100%.

Because now what we want to do is create a Grady int background image linear Grady int function, and we'll say to bottom sooner from top to bottom comma F 2395 a comma.

And then the next color will be be 90 c two b.

Okay, save that.

Check it out.

Now it's got this nice Grady In't.

It looks very rounded.

That's a very interesting looking, um, Progress bar Static Progress bar.

So far.

And now what we want to do is we want to style.

We're gonna We're gonna animate it.

So we're gonna leave a little space for that.

But right now we're gonna do is we're in a style animation bar.

One span after pseudo element critical position.

Absolute top zero left zero Write zero bottom zero.

We're gonna say content, empty strings.

So it appears background size 100%.

And now we're gonna create that that stripey barbershop pole effect background image, linear ingredient Hang tight 45 degrees.

So we want that on a 45 degree angle.

We want the next color stop to be, uh, white.

Let's go say triple F 25%.

So at 25% color stop, it's gonna be white.

So if I saved that, you probably shouldn't even really see anything came good.

And now what we're gonna do is I'm gonna put a comma, and I'm going to go down to the next line and line it up here and I'm gonna say RGB, eh?

0000 I wanted to be totally transparent.

So for the next 25% I want it to be just invisible, just like a chunk of invisible black that you can't see.

And then now the next line rgb a the same thing.

In fact, we're gonna copy that.

We're gonna paste it out, and it's gonna be at the 50% color stop.

Okay, so now if I were to just close that up and save it, let's see if we see anything so you can see the angle.

And things were looking kind of odd here, but trust me, this should work out.

Let's see, it's go back here, put a comma, and we're gonna say triple F at the 50% mark.

Triple F at the 75% mark RGB, eh?

We're gonna do that.

000 again.

But at the 75% color stop and last round, the RGB a invisible close up the parentheses of Lenny Ingredient semi colons.

Save it.

Let's see what we've got.

Okay, so we've got ourselves a two line, so it kind of looks like a candy cane.

Actually, it's around Christmas time, so this is kind of a nice little effect, and you can see that it's got s so it's got the angle red angle so you can see how this works or from 25 to 50 per cent.

You've got the white and then from 25 story from 0 to 25% white.

You got 25 to 50.

It's invisible, so you can see you can see the red and so on and so forth.

So that's what we created there.

But now we need to change the size.

I don't like the size of that.

Remove that comet.

So I'm gonna go all the way back here, overwrite background set lips that overwrite background size and say, 30 pixels and 30 pixels.

So So that should give us something like this.

Okay, now we're onto something here, but I don't like how Ah, candy cane e.

It looks despite enjoying the Christmas season, I'm going to say 0.3 and just make it a little bit more transparent.

There we go.

So it's a little bit more subtle oven effect.

So we're also gonna animate that.

So what we're gonna do now is we're gonna go back up to the span and let's animate that one.

So we're going to say we're gonna say animation, Let's say progress Dash Bar one over the course of 10 seconds infinitely and um, let's make it ese.

And then we'll go down to make a key frame key frames.

And we gotta say Progress Dash bar, Dash one.

And here's where we're gonna start creating that animation at 0% we're gonna say the width is 20% so it starts a 20%.

You get started at zero, if you want.

I'm gonna say 50% in the timeline.

The winter will be 80%.

So it's that's gonna be making it to 80%.

Uh, we might be able to make this little bit more simple.

Let's see, 100% 0 100%.

And this is gonna go up to 100% of the with.

Let's just see what that does.

Let's see that and us to see so it animates.

Gotta ease.

It goes.

It's going to 100%.

See how it really slows down at the ease there.

We don't want it to do that.

We actually wanted to on Lee, Go to, um, that's 60%.

Let's say that's the wit that it goes to, and that goes to about 60 eases too slow for me.

You could make it linear if you want.

I'm gonna say linear or he's in And it will be linear, essentially for the rest and over the course of making six seconds a little bit slow for me and it's gonna ease in and it's gonna start speeding up to the 60% mark and it stops like that.

Ah, interesting.

I don't really like how that looks.

Let's go with 0% it's gonna start at 0%.

I'm gonna go to 60 and let's just make it straight up linear and see what that does.

So it makes it to 60% and then it starts back.

So if you wanted to be in, if you want to go back, I know it doesn't really make sense.

So it's loading, and then it goes to 60% and then it would just it just jumps back.

What you could do, if you really wanted, is you could say, at the 50% of the time limit goes to the 60% and then it goes back, too, with 0%.

If you want it to be more smoother, just an animation like this, it's going boom.

60% that's gonna make its way back.

It doesn't really make sense for the Progress bar to do that.

Um, because that's kind of a tease.

Your leg.

I'm loading, unloading and loading.

And then it's like, No, never mind.

So I'm actually just gonna go back to original style here and at the 100% mark, go to 60% and then restarts.

And I actually kind of think ese might be a good choice here, so it's actually little bit more of a it slows its way to the boom.

There we go.

That makes sense.

That looks good on me.

So let's keep going.

Now we want to do is you want to animate those little angle Dwight candy cane bars.

I'm gonna call from Barbershop pull candy cane bars.

Ah, let's go to our our span after here.

And we're gonna give it an animation as well.

We're gonna call it Progress Dash bar, dash after dash, One clunky name.

But we're gonna say 0.5 seconds infinite.

And it's gonna be linear animation.

That means we need to create a key frame.

So let's say Keefe reigns.

The name of it is progress.

Dash bar Dash after Dash one and the animation will look like.

So at 0% it's gonna be the background.

Possession is gonna be zero and 100%.

And that 100% of the timeline the background position is going to be 30 pixels and 100%.

Let's see what that does.

So see how it's now moving.

It looks pretty cool.

So let's see what happens if we change this value Back in position to like 100 pixels is just see, It's moving its position a lot further, so it's going really fast, and it looks kind of weird.

And if you did something like 10 picks is gonna move to AA lot slow like a lot slower of a distance or smaller of a distance, rather so you could see it's moving 10 pixels, as you could see.

And if I if I move it 20 pixels, you're going to see again, it's gonna look really jumpy.

That's because it's not making the full width of of that, uh, that bar we haven't set of the background size of 30 and 30.

So if we say 30 pixels as a backup position, it's gonna look like an infinite loop, and that looks nice.

Awesome.

Okay, so that's it for that progress bar.

Unlike in that.

And now let's move on to the Progress Bar number two, which is this one right here.