CSS animation - spinner/loader speed - css

Question

I have the following CSS code for a spinner animation I got from:
https://loading.io/css/
CSS is:
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #000;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
I want to know in which way to change CSS in order to speed up the animation.
I tried fiddling around with animation-duration and animation-delay properties, but I can't seem to make it faster without messing up animation.

Answer 1

You simply need to change the animation-duration AND the animation-delay the same way. Here for example I divided everything by 2 which made the animation twice faster.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #000;
border-radius: 50%;
animation: lds-ring /*1.2s*/0.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: calc(-0.45s / 2);
}
.lds-ring div:nth-child(2) {
animation-delay: calc(-0.3s / 2);
}
.lds-ring div:nth-child(3) {
animation-delay: calc(-0.15s / 2);
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg)
}
}
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Here is a generic example using CSS variable where you can easily control the speed:
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #000;
border-radius: 50%;
animation: lds-ring calc(1.2s / var(--d,1)) cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: calc(-0.45s / var(--d,1));
}
.lds-ring div:nth-child(2) {
animation-delay: calc(-0.3s / var(--d,1));
}
.lds-ring div:nth-child(3) {
animation-delay: calc(-0.15s / var(--d,1));
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg)
}
}
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="lds-ring" style="--d:1.2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="lds-ring" style="--d:2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="lds-ring" style="--d:3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

ORIGINAL
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #58c;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #58c transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
FASTER
Adjusting the animation speed and the animation delay is correct. You simply have to adjust it accordingly.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #b00;
border-radius: 50%;
animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #b00 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.08s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.1s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>

Answer 3

Make a change on animation property and try.
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

Answer 4

You are using the shorthand animation here.
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
which basically resolves into:
animation-name: lds-ring;
animation-duration: 1.2s;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
animation-iteration-count: infinite;
In order to make it faster you have to lower the animation duration.
For further explanation read this animation property

Answer 5

Still if you have problem with spinner which you used, then try this...
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 999999;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 12px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #004C91;
width: 75px;
height: 75px;
-webkit-animation: spin .9s linear infinite;
animation: spin 1s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div id="loader"></div>

Answer 6

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid black;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin .7s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>