UPDATE – CSS Spinners and Loaders

Category: | Posted on:November 16, 2021
new loaders

I added some new CSS spinners and other loading effects to the CSS Animation Archive. I felt the loaders section in general could use a bit more fleshing out. Spinning loaders are an obligatory CSS effect so I had to throw a couple in there.

CSS Spinners

I added two spinners. The first is the classic rotating border trick. It’s just a square element with a circular border-radius, dark border color, and partial border in a different color that rotates in an infinite loop.
.standard-spinner {
animation: standardSpinner 1s linear infinite;
border: 10px solid $dark;
border-top-color: $darker;
border-radius: 50%;
box-sizing: border-box;
height: 75px;
width: 75px;
}
@keyframes standardSpinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

The second spinner is a variation on this one by The Net Ninja minus the alternation. I liked the simultaneous pulse better. This one employs a pair of internal <div> elements with opposing borders.
.pulsing-spinner {
height: 75px;
position: relative;
width: 75px;
div {
animation: pulsingSpinner 1s linear infinite;
border: 10px solid transparent;
border-top-color: $dark;
border-radius: 50%;
box-sizing: border-box;
height: 100%;
position: absolute;
width: 100%;
}
div:nth-child(2) {
border: 10px solid transparent;
border-bottom-color: $dark;
}
}
@keyframes pulsingSpinner {
0% {
transform: rotate(0deg);
border-width: 10px;
}
50% {
transform: rotate(180deg);
border-width: 1px;
}
100% {
transform: rotate(360deg);
border-width: 10px;
}
}

I also threw in a bouncy ball and flipper for the heck of it.

Other Revisions

For performance purposes I hid the loaders that were just glitch, neon, and rainbow variations of the dancing dots. They still exist in the code but are hidden with comments. I also went back and refactored some of the existing animations to use the alternate property, which allowed me to clean up some redundant bits of code within the keyframes.

Tags: , ,

Related Logs


  • NEW PROJECT – Space Invaders

    January 27, 2025

    Space Invaders is a bare-bones facsimile of the classic arcade game of the same name. Objective I wanted to take what I learned from the Asteroids Tutorial in my last project and iterate without the training wheels this time. Space Invaders has more lateral movement from the player and hostiles than in Asteroids, and has […]

    Continue Reading
  • NEW PROJECT – Asteroids

    January 9, 2025

    Asteroids is a bare-bones facsimile of the classic arcade game of the same name. Objective I want to focus on more creative projects this year in order to break up the grind of work skill development. I’ve always been passionate about game design, and there are a lot of free tools to chose from. My […]

    Continue Reading
  • NEW PROJECT – Catholic Liturgical Date Checker

    May 29, 2024

    The Liturgical Date Checker project uses the Liturgical Calendar API to display information about Catholic Holy days. On page load it fetches info for today, tomorrow, and yesterday. It also has a search field that will return celebration info about a specific date. Objective This is just more basic API practice. I started this in […]

    Continue Reading