CSS Only Loader Animations

,
#1

Some 500+ CSS only load animations

Test the following code in a tiddler and have fun!
-mario

PS: Did you play it? – :wink:

<style>
.loader {
  width: 80px;
  height: 70px;
  border: 5px solid #000;
  padding: 0 8px;
  box-sizing: border-box;
  background:
    linear-gradient(#fff 0 0) 0    0/8px 20px,
    linear-gradient(#fff 0 0) 100% 0/8px 20px,
    radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,
    #000;
  background-repeat: no-repeat; 
  animation: l3 2s infinite linear;
}
@keyframes l3{
  25% {background-position: 0 0   ,100% 100%,100% calc(100% - 5px)}
  50% {background-position: 0 100%,100% 100%,0    calc(100% - 5px)}
  75% {background-position: 0 100%,100%    0,100% 5px}
}
</style>

<div class="loader"></div>
7 Likes
#2

Now that is timing! I was reading through the list of recent posts before I went to ask my question, and I saw this.

My question was going to be something like, “Is there any prior art to doing a loading screen using a simple CSS animation involving an image or two from the wiki?”

While I’m not sure this entirely answers that, it certainly is in the same ballpark!

Thanks for sharing!

#3

Very nice! Thank you for sharing.