hey what's up everybody welcome back to
css3 in 30 days today's day number 21
and we're going to be coding up some
animated css only spinners let's check
it out
animated spinners right here day number
21 we're going to be making these right
here spinners what would you use a
spinner for when you're loading content
when you're loading a page you know when
you're loading an application an image
that's where you'd use a spinner you see
it quite often in websites applications
software
uh it's simply or watching videos even
the spinner just indicates that
something is happening something is
loading and it's uh
they're kind of fascinating to look at
and these are only made in or these are
made
in css3 only so
let's jump in and get started
here in our code editor we're going to
go ahead and download day number 21
spinners
i'm gonna give you a
second to do that in fact you could just
pause the video go ahead and do that
and i'm just gonna show you a couple
things so here's the index
file html is very simple it's simply a
div with the class of spinner one and a
dip with the class of spinner two that's
it let's jump into our sandbox and get
coding our css first thing we're gonna
do is we're gonna select spinner dash
one and we're gonna give it a position
of relative display of inline
block
vertical line of middle
and now we're going to give it a width
64 pixels and height 64 pixels
and a border radius of 64 pixels you
could also say 100 that should do the
trick but 64 pixels means it is going to
be if the border raises border radius
for 64 pixels and it's the same as width
and height then it's gonna be perfect
circle
all right
if we save that
you probably shouldn't actually see
anything at this point you just see an
empty space that's 64 by 64. beauty
now we're going to do is we're going to
say spinner dash 1 and the before sudo
position absolute
we got to give it a content of an empty
string of course
and width whoops width of 64 pixels
height of 64 pixels
and a border radius again 64 pixels
we're going to give it a color of 3 2 3
and this is the text color
323b40 but here's the thing there's
going to be no text but we're going to
be using an interesting css
value called current color it's kind of
like a css variable so watch this if i
were to go
box shadow inset
negative 5 pixels 0 0 and then 5 pixels
and then
current color that's going to grab the
actual color so it's kind of like you
set a variable so i'm going to save that
check it out in the browser you can see
the current color is that gray
because it's grabbing current color if i
were to remove this i'm not really sure
what would happen
it looks like it would be it's grabbing
the text color
uh it's inheriting the text color from
the body but if i were to change this to
red
the current color should be red so
that's how that works right there pretty
fun little css trick there and now we're
going to do is we're going to clip this
shape this unusual shape we just made to
a rectangle but we're going to actually
define the values here 0 64 pixels
comma 32 pixels
comma 0. that will give us this shape
here again
kind of weird
but hang with me it's kind of like a
like a like an 8-bit hockey stick
hanging upside down
but watch this
we're going to actually say border
radius
oh here's the problem
oh there we go border radius i thought i
already added that
but i didn't do it properly border 864
so this hockey stick shape is actually
going to now get this shape here
that looks a lot nicer
so
you can see what the border radius did
to change that so this
this shape there without the border
radius
actually kind of looks like it's very
unusual the right side of it is thicker
the top side of it is is a bit thinner
and long but the border radius really
gives it a nice feel and you can almost
see now how that's going to turn in you
know how that's going to look when we
spin it
so now we're going to do is say
animation
we're going to give the animation name
of rotator
uh one second
infinitely
linear in fact i want to ease it i think
that might be
let's see what that looks like
and now we need to create a keyframe so
keyframes it's called rotator
rotator
at zero percent we're going to say
transform and we're going to rotate it
180 degrees
and let's uh say 50
we're gonna go rotate
to
transform whoops transform
rotate back to zero degrees
and then 100
we're gonna do
back to
180 degrees let's see what that does
interesting
very interesting
okay
this the first one actually needs to be
negative 180 degrees
but i'm gonna try something here
okay
so do you see because i have an ease
it's actually doing this like jump jump
jump
jump if i make it linear
let's see it should just be spinning
exactly but now i'm wondering if i just
started at zero let's just try something
start at zero and i just say 100 we spin
at 360. it should still do the same
thing
yeah and now i can do ease
i like that
it's kind of neat
so let's try that okay but now what i
want to do is i wanted to also
animate the box shadow
and we're going to say
inset negative 5 pixels 0 0 5 pixels
current color that's in fact the same
box shadows right now but we need to set
it
to this because what i want to do is now
make a very uh variant make a variation
of it so box shadow at
okay this is where i might need
let's try this negative one and then one
let's see what that looks like
very weird
so
here's where i'm going to actually throw
that 50 back in there and i'm going to
transform the whole thing
i'm going to say 180 degrees here starts
at 0
to 180 degrees and then 360.
and i'm going to do this box shadow
at 50 i'm going to do this and then at
100 i'm going to go back to this
that should give me an interesting
effect
okay
it does do something it's kind of like a
we're doing some weird stuff here folks
we're gonna change this back to linear
that should probably make there we go
so there we go so you see how
as it goes around it gets thinner and
then thicker thinner and thicker it's
kind of neat
looks like a tadpole
in a way now i don't like how
it's thin on the side i kind of want to
get thin at the top so that's where i'm
going to go back here to zero percent
i'm going to say negative 180 degrees to
start at
then it's gonna go spin to zero degrees
at the top which will make it thin at
the top and then i'm going to bring it
to 180 degrees here
that is going to change where
it gets smaller
at the top
yep i like that that looks good there's
our first rotator now let's go down to
the next
spinner so i'm going to leave the
keyframes at the bottom good practice to
do that so your code is organized the
next spinner is going to be called or is
called spinner dash 2
position relative
margin 32 all around
and
display
inline block
vertical align middle same styles as
the top
excuse me the top one uh
those first four lines 16 pixels width
16 pixels height and then we're gonna do
border radius
this is where i had the problem last
time i just wrote border instead of
border radius 16 pixels
background color
three two three
b four zero
cool and now
uh we're gonna
save that and see if it does anything
okay i call
silly brad i said spinner one you
probably caught that spinner two
there we go so we have a dot we have a
nice circle
let's continue
now i'm gonna say spinner dash two
before pseudo-element and spinner dash 2
after pseudo element
position absolute
display inline block
vertical align middle
height
16 pixels
width 16 pixels
border radius 16 pixels background color
inherit
content of course we need the content
i'm gonna put that at the top
i like it having right after position
there we go
and
that's going to
you're not going to see anything it's
just creating the the sizes of the
elements i don't think you're actually
going to see it in fact no we don't see
anything yet and we don't see anything
yet because the position is
absolute and we haven't given it any
left or we haven't transformed it or
moved it along the x-axis
at all so it's actually just hiding
behind this circle so they are there
just hiding so that's where we're
actually going to start animating
so now i'm going to say spinner dash 2
before i'm going to animate the before
circle and i'm going to say transform
and we're going to go translate x
and that's going we're going to bring it
120
that way
so negative 120
and so let's save that and
cool okay so now what we're going to do
is we're going to say transform origin
so this lets you modify the origin for
transformation so you can transform you
can move where the origin of the element
is so meaning like are you transforming
from the center the top left the top
right or any
anywhere around the element itself you
can see bottom center left top right you
can actually use numeric values as well
so let's go 32 pixels and so that's x
and then y which
is gonna be important
once we start our animation so we're
gonna call the first
animation orbit dash one over one second
let's do it infinite and linear to keep
it safe
and now we need to create that animation
keyframe
do it down here at the bottom keyframes
and let's call it uh what we said we
would orbit one
zero percent we're going to say
transform translate x we're going to go
we're going to start at negative 120
percent
and
we're going to rotate it 180 degrees so
at zero percent that's its first
step in the timeline
then at
let's do 30
of the way through
let's change the rotate to zero degrees
and leave the translate at there at one
negative 120. we're gonna go 70 percent
the translate will remain the same
and the rotate will stay at zero in fact
we're going to leave it there for
for that portion as well
and then one more here translate x
uh we're gonna go to negative 180
degrees let's see
what we just created okay interesting
not quite where we're trying to get as
you can see here this is kind of more
what we're
trying to get to
so
we got our orbit one infinite linear and
what did we do 30 70 oh
that's the problem 100
we're gonna bring it back around so now
let's save that
there we go so it swings around and it
goes as you can see do you see how it
swings wide
out here the reason why it does that is
because this is where you can see this
coming into play the transform origin if
i take this out and save it watch what's
going to happen in fact the transform or
it doesn't even do anything let's say 10
pixels 10 pixels just to okay you see
how that's working transfer it needs a
transform origin in order to for us to
animate that transform
if i just left it at nothing it's
actually it is actually rotating
but you can't see it rotate because it's
just a black circle
so
you know you can actually see that it's
working so we actually do have to have a
transform origin if i did 10 pixels and
10 pixels on the x and y it's going from
top and left so it's going to be
rotating around that
that point so there's actually a
tympanus.net
tympanus.net i don't really know how to
pronounce that uh great website though
you could see the transform origin by
default is center center you can go
you can go top center you can go bottom
center and you can do specific
points like we did 10 pixels and 10
pixels and it will rotate it based on
that point as if you put put a pin
in in an object and then you spun it
around that pin
so that's kind of what we're doing here
so we want to go back to our
32 pixels and
50
and that's gonna allow it to spin on a
very unusual axis
so that it creates that effect okay so
that means we are now on to the next one
so let's style the after pseudo element
spinner dash 2
after
and what we're going to do here is we're
simply
let's copy this one
and just change a few of the values just
to save some typing
transform we're going to make this one
120 so it's on the other side this is
going to be a half 16 pixel negative 16
pixels and 50 so that when it spins
around it's going to do the opposite
effect and we can't use orbit 1 because
it's going to do
it's going to do that which is really
weird
unusual stuff we're creating here so we
need to create an orbit 2 and do the
invert
inverted version of orbit one so copy
that
paste it out we're going to call it
orbit two and we're going to start at
instead of the negative values all just
gonna be inverted so
if it's a negative it's a positive it's
a positive it's a negative so negative
120 now becomes 120 180 now becomes
negative 180 like so so now this would
be positive and leave those there
that should do
that should do the trick
i might have i might let's see
okay so now i don't want them to do that
it's actually
they're just like
they're like doing like a big like high
fives or something
let's make this one negative 180.
they're
odd
okay
those are spinning
i like this that we're trying to figure
this out together figure out some
problems together
i
at this present moment i'm trying to
understand
why it did it's doing this that is very
odd
let's take k let's take out orbit two i
just want to see what orbit one is doing
orbit one is doing what we want
yes orbit two
is it start
orbit two okay wait wait
let's
wrote okay
i was wrong when i said switch all the
values to negative and positive the
translate needs to switch so that now
orbit two is all positive values but
up here we started like this we have the
rotates
we're going to rotate it the exact same
just from the different side awesome and
there they are spinning in the proper
direction
and we have example number one swirling
around shrinking as it gets to the top
that looks awesome so there we go we've
got our css only spinners that are
animating and that's just a couple
examples you can literally create
whatever you want as a spinner maybe how
about this challenge for you create a
third example a third spinner and make
it
literally whatever you want it could be
a spinning square it could be three
spinning squares it could be something
that's bouncing across the screen you
could you could do whatever you want for
a spinner could be very simple very
complex very unusual you could combine
these animations and do something very
very uh quirky totally up to you so try
that out exercise some css transforms
and key frames and animations and see
what you can come up with thanks for
joining me today on day number 21 see
you tomorrow in day number 22.
[Music]