Skip to main content

CSS Loading Spinners

Loader animation is one of the most important parts of any website. It helps in keeping the user engaged and provides them with some visual feedback about the status of the page loading. The most common type of loader is the spinner.

Curated List of CSS3 Loading Spinners

<div class="spinner"></div>

<style type="text/css">
.spinner {
border: 6px solid #6667ab;
border-top: 6px solid #ff0000;
border-radius: 50%;
width: 64px;
height: 64px;
animation: loading 2s linear infinite;
}


@keyframes loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

<div class="spinner"></div>

<style type="text/css">
.spinner {
width: 64px;
height: 64px;
border: 6px solid #6667ab;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: spinning 2s linear infinite;
}


@keyframes spinning {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

<div class="spinner"></div>

<style type="text/css">
.spinner {
width: 64px;
height: 64px;
border: 1px solid #6667ab;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: spinning 2s linear infinite;
}
.spinner::after {
content: '';
box-sizing: border-box;
position: absolute;
left: 50%;
top: 0;
background: #6667ab;
width: 1px;
height: 32px;
transform: translateX(-50%);
}


@keyframes spinning {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

<div class="spinner">
  <div class="spinner-dot"></div>
  <div class="spinner-dot"></div>
  <div class="spinner-dot"></div>
</div>

<style type="text/css">
.spinner {
width: 64px;
height: 64px;
position: relative;
animation: spinner 3s infinite linear both;
}


.spinner-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: spinner-dot 2.0s infinite ease-in-out both;
}


.spinner-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #6667ab;
border-radius: 100%;
animation: spinner-dot-before 2.0s infinite ease-in-out both;
}


.spinner-dot:nth-child(1) { animation-delay: -1.0s; }
.spinner-dot:nth-child(2) { animation-delay: -0.8s; }
.spinner-dot:nth-child(3) { animation-delay: -0.6s; }
.spinner-dot:nth-child(1):before { animation-delay: -1.0s; }
.spinner-dot:nth-child(2):before { animation-delay: -1.8s; }
.spinner-dot:nth-child(3):before { animation-delay: -0.6s; }


@keyframes spinner {
100% { transform: rotate(360deg); }
}


@keyframes spinner-dot {
50%, 100% { transform: rotate(360deg); }
}


@keyframes spinner-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
</style>

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

<style type="text/css">
.spinner {
position: relative;
width: 64px;
height: 64px;
}


.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 100%;
position: absolute;
background-color: #6667ab;
opacity: 0.6;
top: 0;
left: 0;


-webkit-animation: custom-bounce 2.0s infinite ease-in-out;
animation: custom-bounce 2.0s infinite ease-in-out;
}


.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}


@-webkit-keyframes custom-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}


@keyframes custom-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>

<div class="spinner-ring"></div>

<style type="text/css">
.spinner-ring {
display: inline-block;
width: 64px;
height: 64px;
}
.spinner-ring:after {
content: " ";
display: block;
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid #6667ab;
border-color: #6667ab transparent #6667ab transparent;
animation: ring 1.2s linear infinite;
}
@keyframes ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

<div class="loader-three-blocks">
  <div></div>
  <div></div>
  <div></div>
</div>

<style type="text/css">
.loader-three-blocks {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.loader-three-blocks div {
display: inline-block;
position: absolute;
width: 14px;
background: #6667ab;
animation: loader-three-blocks 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loader-three-blocks div:nth-child(1) {
animation-delay: -0.24s;
}
.loader-three-blocks div:nth-child(2) {
left: 26px;
animation-delay: -0.12s;
}
.loader-three-blocks div:nth-child(3) {
left: 50px;
animation-delay: 0;
}
@keyframes loader-three-blocks {
0% {
top: 0px;
height: 64px;
}
50%, 100% {
top: 16px;
height: 32px;
}
}


</style>

<div class="loader-pie"></div>

<style type="text/css">
.loader-pie {
position: relative;
width: 32px;
height: 32px;
border: 32px solid #FFF;
border-radius: 50%;
animation: pie-animation 2s linear infinite;
transform: rotate(45deg);
}


@keyframes pie-animation {
0% , 19%{ border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF }
20% , 39%{ border-color: #6667AB #FFFFFF #FFFFFF #FFFFFF }
40% , 59%{ border-color: #6667AB #6667AB #FFFFFF #FFFFFF }
60% , 79%{ border-color: #6667AB #6667AB #6667AB #FFFFFF }
80% , 100% { border-color: #6667AB #6667AB #6667AB #6667AB }
}
</style>

<span class="loader-arrow"></span>

<style type="text/css">
.loader-arrow {
width: 64px;
height: 64px;
display: inline-block;
position: relative;
border: 4px solid;
border-color:#6667ab #0000 #6667ab #0000;
border-radius: 50%;
box-sizing: border-box;
animation: 2s rotate linear infinite;
}
.loader-arrow:before , .loader-arrow:after{
content: '';
top: 0;
left: 0;
position: absolute;
border: 10px solid transparent;
border-bottom-color:#6667ab;
transform: translate(-4px, 38px) rotate(-45deg);
}
.loader-arrow:after {
border-color: #6667ab #0000 #0000 #0000 ;
transform: translate(44px, 4px) rotate(-45deg);r
}
@keyframes rotate {
100% {
transform: rotate(360deg)
}
}
</style>

<span class="loader-2dots"></span>

<style type="text/css">
.loader-2dots {
width: 64px;
height: 64px;
border-radius: 50%;
background: transparent;
display: block;
box-sizing: border-box;
animation: rotate 1.5s linear infinite;
}
.loader-2dots::after, .loader-2dots::before {
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
background: #6667ab;
width: 32px;
height: 32px;
transform: translate(-50%, 50%);
border-radius: 50%;
}
.loader-2dots::before {
left: auto;
right: 0;
background: #2667ab;
transform: translate(50%, 100%);
}


@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

A spinner is a graphical control element that allows the user to indicate progress to the user. Spinners come in two common varieties: indeterminate and determinate. Indeterminate spinners do not have a set amount of progress that they show, and will continue spinning until told to stop. Determinate spinners, on the other hand, show the user how far along they are in a process.

Both types of spinners can be used to good effect in user interfaces, but it is important to choose the right type for the job at hand. Indeterminate spinners are best used when the length of time required to complete a task is unknown, or when the task is not tied to any specific goal. Determinate spinners, on the other hand, are best used when the length of time required to complete a task is known, or when the task is tied to a specific goal.

When used properly, spinners can be a great way to improve the usability of your web applications.

By continuing to use the site, you agree to the use of cookies.