I love to keep things neat and as minimal as possible, so I’m sure this example will be better than a lot of others CSS snippets you can find out there because in these few lines of code you only see what you need to understand and nothing else can distract you.
So the animation consists in four dots that increase and decrease their dimension and an highlight color flows between them. It’s made using the keyframes CSS rule (of course) and now let’s take a look at the bare HTML structure:
So we have nothing more than 4 span tags. We’ll apply now some styles:
Well, here I defined a new animation through the @keyframes rule called “loading” and in the three phases of the animation I changed the opacity (to give the feeling of the sliding of the animation) and the dimension (through the transform:scale() property).
After I set the tag to display:inline-block; so that it could keep the qualities of an inline element and a block element (so that we can define properties like width and height to make them visible). Following a list of simple properties until the animations-delay used here to execute the animation sequentially on the elements.
That’s all, Stay tuned!