into trouble
progress bars animated
bottom
infinite progress bars nice hi everybody
what's up welcome back to css3 in 30
days today's day number 19 and we're
gonna be coding
in css three only
some animated progress bars let me show
you what we're going to be making here
in the final result you can see we got
two examples we got example one and two
we got uh
this really interesting looking nav a
progress bar that
slides
up to about 60 in fact it slides exactly
to 60 percent
and it has this like kind of like uh
barbershop
you know stripey animated effect going
on
and it's
it's set within and uh kind of looks
like an inset like uh
parent container with an inset shadow so
it has this really cool
three-dimensional effect some rounded
corners it slides all the way up to
sixty percent goes back resets
and then example two
the interesting thing about this one is
that it goes
to one hundred percent
uh 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 going to be making those it's
relatively straightforward we're going
to be messing around with some
animations again and some keyframes so
hang tight let's jump in our code editor
open up number 19 animated progress bars
get yourself set up and ready to go and
let's hang out for the next 20 minutes
or so and see what kind of trouble we
can't get ourselves into alright so here
is the index file i'm just going to show
you the markup real quick it 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 a style of
width sixty percent
simply just means the width of that
container is sixty percent going to be
animating it to its its maximum width
and example number two we have a span
with a data label attribute
uh that says loading
we could have made that say just title
or
even
alt but we're going to be using data
label
instead and we're going to 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
jump into the sandbox and get started
let's start out with
the animation
bar one we're going to say position
relative
display block
there we go
padding 5 pixels
font size 16
pixels again this is all just
housekeeping stuff
line height 16 pixels
border radius we're gonna make it 30
pixels so pretty rounded
background
rgba and it's going to be zero zero zero
zero point one
so an almost invisible black
box shadow
inset
and we're going to say 0
1 pixel 2 pixels rgba 0 0 0 0.25
okay
but we're out also going to add another
shadow to that if i left it like so
let's see what happens
so
it looks pretty good as is but if i were
to also add zero one pixel
rgba
and then two five five two five five two
five five 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 can see just gives it a
little bit more depth so let's make it
actually i kind of like it pretty bright
let's do 0.8 on that one
okay that looks pretty good now what
we're going to do is we're going to
style that span within it so we're going
to say
animation bar
1 span so we're going to style that up
we're going to say position relative
display so this is the progress bar
within the container that we're styling
up here inline block we're going to say
vertical align middle want to stay in
the center there height 20 pixels border
radius
10 pixels on the top
zero and zero so that's zero on the
right zero on the left zero zero on the
right zero on the bottom ten pixels on
the left
so 10 pixels of border radius on the top
and on the left
and we're going to say
overflow
hidden
background color
we're going to say f5
6982
background size 100
we're going to be playing around with a
background image which is why we want to
use background size okay now we're going
to create a gradient so let's just let
me just take that out for a sec and just
see what we've come up with so it's just
a like 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 around it so it fits nicely
within its parent container
and uh overflow hidden because we're
gonna have a
we're going to have something going on
within the inside of that so i'll show
you in a moment
background size 100 because now what we
want to do is create a gradient
background image
linear gradient function and we're going
to say two bottom
it's going to go from top to bottom
comma
f2395a
comma and then the next color will be
b90
c2b
okay save that check it out now it's got
this nice
gradient 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 going to we're
going to animate it so we're going to
leave a little bit of space for that but
right now what we're going to do is
we're going to style animation bar 1
span
after sudo element
we're going to go position
absolute
top 0 left 0 right zero
bottom zero
we're going to say content empty string
so it appears
background size 100 percent
and now we're going to create that that
stripey barbershop pull effect
background image
linear gradient
hang tight 45 degrees so we want that on
a 45 degree angle we want the next color
stop to be uh
white i'm just gonna say triple f
25 so at 25 color stop it's gonna be
white
so if i save that you probably shouldn't
even really see anything okay good
and now what we're going to do
is i'm going to put a comma
and i'm going to go down to the next
line
and line it up here
and i'm going to say rgba
zero zero zero zero i want it to be
totally transparent so for the next 25 i
want it to be
just uh invisible just like a chunk of
invisible black that you can't see
and then now the next line rgba the same
thing in fact we're going to copy that
and we're going to paste it out
and it's going to be at the 50 percent
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 are looking kind of odd here
but uh trust me this should work out
let's see let's go back here put a comma
and we're going to say
triple f
at the 50 mark triple f
at the 75 mark
rgba
we're gonna do that zero zero zero again
but at the 75 percent color stop and
last we're gonna do rgba invisible
close up the parentheses of linear
gradient semicolon 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 uh so it's
got the angle red angle so
you can see how this works so from 25 to
50 percent you've got the white and then
from 25 sorry from zero to 25 percent
white and then you got 25 to 50. it's
invisible so you can see
uh you can see the 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 comma so i'm going to go
all the way back here
and i'm going to overwrite background
oops that overwrite background size and
say 30 pixels and 30 pixels so so that
should give us something like this okay
now we're on to something here
but i don't like how
uh
candy caney 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
of an effect so we're also going to
animate that
so what we're going to do now
is we're gonna go back up to the span
and let's animate that one so we're
gonna 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
ease
and now we have to go down and make a
keyframe
keyframes and we're going to say
progress
dash bar dash one
and here's where we're gonna start
creating that animation at zero percent
we're gonna say the width is twenty
percent so it starts at twenty percent
you can start it at zero if you want uh
we're going to say 50
in the timeline the width will be 80 so
it's
it's going to be making it to 80
uh we might even be able to make this a
little bit more simple let's say 100
percent zero to 100
and this is going to go
up to
100
of the width let's just see
what that does
let's save that
and let's just see
so it animates it's got an ease it goes
it's going to 100 percent
see how it really slows down at the ease
there
we don't want it to do that we actually
want it to only go to
that 60 let's say that's the width that
it goes to
and then it goes to about 60 ease is too
slow for me
you can make it linear if you want i'm
going to say linear
or ease in
and it will be linear essentially for
the rest
and over the course of let's make it six
seconds a little bit slow for me
and it's gonna ease in it's going to
start speeding up
to the 60 mark
and it stops like that
uh interesting i don't really like how
that looks let's go with zero percent
it's going to start at zero percent i'm
going to go to 60 and let's just make it
straight up linear
let's see what that does
so it makes it to 60 percent
and then it starts back so now if you
want it to be a no if you wanted to to
go back
i know it doesn't really make sense so
it's loading and then it goes to sixty
percent 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 timeline it goes to the 60
and then it goes back
to
with zero percent if you want it to be
more smooth of just an animation like
this it's going boom 60 and it'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 you're
like i'm loading i'm loading i'm loading
and then it's like no never mind so i'm
actually just gonna go back to our
original style here
and at the 100 mark
go to 60 and then it restarts
and i actually kind of think ease
might be a good choice here so it's
actually a little bit more of a
it slows its way
to the boom there we go that makes sense
that looks good to me so let's keep
going now what we want to do is we want
to animate
those little
angled white candy cane bars i'm gonna
call them
barbershop
pole candy cane bars uh let's go to our
uh or span after here and we're gonna
give it
an animation as well we're going to call
it
progress dash bar
dash after dash 1.
clunky name but we're going to say 0.5
seconds
infinite
and it's going to be a linear animation
that means we need to create a keyframe
so let's say keyframes
the name of it is progress dash bar dash
after dash 1
and the animation
will look like so
at zero percent
it's going to be the background position
is going to be zero and 100 percent
and at 100 percent 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 background position to like
100 pixels let's 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 pixels it's going to move to a
lot slow like a lot slower of a distance
or smaller of a distance rather so you
can see it's moving 10 pixels
as you can see
and if i if i move it 20 pixels you're
going to see again it's going to look
really jumpy that's because it's not
making the full width
of of that
that bar we have it set as a background
size of 30 and 30.
so if we say 30 pixels
as a background position it's going to
look like an infinite loop
and that looks nice
awesome okay so that's it for that
progress bar i'm liking that and now
let's move on to the progress bar number
two which is this one right here so now
we're gonna say
animation
bar
two so animation dash bar dash two we're
gonna say position relative display
block font size 16 pixels
line height 16 pixels
we're going to go a background rgba
that's going to be a 0 0 0 and 0.1
box shadow is going to be inset
at zero one pixel
two pixels and rgba we're gonna go zero
zero zero and zero point two five okay
see what that looks like
uh you can't see it that's because
there's no content within it there's the
the span within it there's nothing in
there so it's collapsing and there's no
hard-coded height so that's why you
cannot see it
so let's just for the purposes of this
testing let's give it a height of 20
pixels so we can see it
there it is
uh we're going to take that out in a
moment
but i want that same effect as the
example number one so that bottom
gradient so
uh sorry box shot i'm going to copy this
box shadow all together i want the same
box shadow style
yes that's what i was going for we got
that white highlight at the bottom it
looks good okay so we know that's there
let's remove the height hard-coded
height we don't need it
we want it to be a dynamic height based
on its child element
so now we're going to say animation
dash bar dash 2
span
and we're going to say
position relative display inline block
vertical align middle
height 20 pixels
background color
let's do double o e 6
background size 100 because we're going
to do a gradient here using background
image
and we're going to say linear gradient
it's going to go to bottom that could be
2 left to right to top however you want
it to be it's going to be double zero b
so comma double zero b three b four
comma and then double zero eight
zero eight one that's the the two colors
you need for the gradient save that
let's check it out
of course you're not going to see it
because it has no width right now let's
give it a width just to so we can see
there we go 20 width you're going to see
the gradient top to bottom it's that
green to dark green
looks pretty good i like that style it
fills out the
the parent element
uh it looks nice i like it okay so i'm
gonna remove that width because i don't
actually need it
now we're gonna use the before and after
pseudo elements to create a tool tip
uh that you can see right over here so
let's jump down here we're going to
style those up we just did tooltips
yesterday so this shouldn't be too crazy
for you animation bar 2 span before
pseudo element
we're going to say position
absolute right it's going to be zero
positioned absolutely on the zero bottom
100
display inline block
width
0
height 0 now we're going to do basically
what we're doing is we're creating the
the arrow
10 pixels solid transparent
border right
which is zero
border left
no border bottom width is zero
and then the border
top color so the one we want to appear
will be rgba zero zero zero zero point i
know zero zero zero
one
and then content
empty string
now that should give us a little arrow
as you can see just like that
so it's actually looks like it's
pointing in the top right but it's
actually pointing down
because relative to what you'll see here
we want that little tiny
almost like a little speech bubble
so that is what we want
i'm liking that so far and now it's time
to style up the animation bar dash 2
span after pseudoelement so this is the
tool tip itself position absolute right
zero
bottom here's here's f here's the fun
part calc we're gonna do what we did
last time yesterday 100 so 100 down
but plus 5 pixels to give some space
sorry bottom is going to be 100 from the
bottom so it's going to move up 100
plus 5 pixels for to account for that
arrow
is that index just one just to keep it
above the parent
display inline block
content we're going to use attribute and
then select the data label so that's
another fun thing whatever the attribute
name is and that's what you can use
for for the attribute there
okay padding so it's going to pull out
the text of that attribute is what i'm
trying to say padding 5 pixels border
radius is going to be
let's do 5 pixels
you can maybe do less if you want 3
pixels
font size 0.8
m so pretty small
based on its parent background color
it's going to be rgba it's going to be
that 0
0 0 1 again
and the color of the text will be triple
f for white
save that check it out here in the
browser there it is that looks good
loading it's pulling that text
it looks really good now all we got to
do is animate
the actual span
so where's the span up here animate bar
2
we're going to say animation the name of
it will be progress bar
two it's gonna be over let's do six
seconds
infinite and ease
so now we have to create a keyframe and
it should be pretty simple it's gonna be
keyframes it's gonna be progress dash
bar dash two at the zero percent we're
going to say
width is 20 we're going to start there
and at 100
we're going to do width 100 very very
simple save that check it out in the
browser so it starts ah started at zero
so maybe so you could see it and then it
would animate but check it out
there we go it's loading it's looking
good it's easing it's easing it's easing
just to about 100
boom done restarts the animation that is
it for our animation of the progress bar
we kind of ripped through that one so
feel free to go back and check it out
again if you need to do that uh
animation progress animated progress
bars are a great thing to use
if you're loading a website or loading a
loading screen or anything like that
building applications i hope you enjoyed
today gave a few ideas i'll see you
tomorrow when day number 20.