CSS Circle Loaders

Last Updated:

January 22, 2023

CSS circle loading animations reassure users that their request has not been lost and the system is still working on it. When a user clicks on a link or taps on a button, the animation is displayed until the load process is completed.

Animated circle loaders HTML CSS

<div class="loaders-container-00">
    <div>
        <span class="circle-loader-1"> </span>
    </div>
    <div>
        <span class="circle-loader-2"> </span>
    </div>
    <div>
        <span class="circle-loader-3"> </span>
    </div>
    <div>
        <span class="circle-loader-4"> </span>
    </div>
    <div>
        <span class="circle-loader-5"> </span>
    </div>
    <div>
        <span class="circle-loader-6"> </span>
    </div>
    <div>
        <span class="circle-loader-7"> </span>
    </div>
    <div>
        <span class="circle-loader-8"> </span>
    </div>
    <div>
        <span class="circle-loader-9"> </span>
    </div>
    <div>
        <span class="circle-loader-10"> </span>
    </div>
    <div>
        <span class="circle-loader-11"> </span>
    </div>
    <div>
        <span class="circle-loader-12"> </span>
    </div>
</div>

.circle-loader-1 {
  width: 48px;
  height: 48px;
  border: 5px solid #fff;
  border-bottom-color: #1da1f2;
  border-radius: 50%;
  display: inline-block;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}

.circle-loader-2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #fff #fff transparent transparent;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-2:after,
.circle-loader-2:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #1da1f2 #1da1f2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-animation: rotationBack 0.5s linear infinite;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.circle-loader-2:before {
  width: 32px;
  height: 32px;
  border-color: #fff #fff transparent transparent;
  -webkit-animation: rotation 1.5s linear infinite;
  animation: rotation 1.5s linear infinite;
}
.circle-loader-3 {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-3:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #1da1f2;
}
.circle-loader-4 {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-4:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #1da1f2;
}
.circle-loader-5 {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-5:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #1da1f2;
  width: 16px;
  height: 16px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
}
.circle-loader-6 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #fff #fff transparent;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-6:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent #1da1f2 #1da1f2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -webkit-animation: rotationBack 0.5s linear infinite;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.circle-loader-7 {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-7:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  background: #1da1f2;
  width: 3px;
  height: 24px;
  transform: translateX(-50%);
}
.circle-loader-8 {
  width: 48px;
  height: 48px;
  border: 5px dotted #fff;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 2s linear infinite;
  animation: rotation 2s linear infinite;
}
.circle-loader-9 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: linear-gradient(0deg, rgba(19, 95, 142, 0.2) 33%, #1da1f2 100%);
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-9:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #263238;
}
.circle-loader-10 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #fff;
  border-right: 3px solid transparent;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-11 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px solid;
  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25)
    rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-12 {
  width: 48px;
  height: 48px;
  border: 3px solid #1da1f2;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.circle-loader-12:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 31px;
  border: 10px solid transparent;
  border-right-color: #1da1f2;
  transform: rotate(-40deg);
}
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.circle-loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: #1da1f2;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.circle-loader-2 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #fff #fff transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:before {
        width: 32px;
        height: 32px;
        border-color: #fff #fff transparent transparent;
        -webkit-animation: rotation 1.5s linear infinite;
        animation: rotation 1.5s linear infinite;
    }
}
.circle-loader-2:after,
.circle-loader-2:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #1da1f2 #1da1f2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}
.circle-loader-3 {
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-bottom-color: #1da1f2;
    }
}
.circle-loader-4 {
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-bottom-color: #1da1f2;
    }
}
.circle-loader-5 {
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background: #1da1f2;
        width: 16px;
        height: 16px;
        transform: translate(-50%, 50%);
        border-radius: 50%;
    }
}
.circle-loader-6 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #fff #fff transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent #1da1f2 #1da1f2;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        -webkit-animation: rotationBack 0.5s linear infinite;
        animation: rotationBack 0.5s linear infinite;
        transform-origin: center center;
    }
}
.circle-loader-7 {
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        background: #1da1f2;
        width: 3px;
        height: 24px;
        transform: translateX(-50%);
    }
}
.circle-loader-8 {
    width: 48px;
    height: 48px;
    border: 5px dotted #fff;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 2s linear infinite;
    animation: rotation 2s linear infinite;
}
.circle-loader-9 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: linear-gradient(0deg, rgba(19, 95, 142, 0.2) 33%, #1da1f2 100%);
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #263238;
    }
}
.circle-loader-10 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #fff;
    border-right: 3px solid transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.circle-loader-11 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 10px solid;
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.circle-loader-12 {
    width: 48px;
    height: 48px;
    border: 3px solid #1da1f2;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    &:after {
        content: "";
        position: absolute;
        left: 20px;
        top: 31px;
        border: 10px solid transparent;
        border-right-color: #1da1f2;
        transform: rotate(-40deg);
    }
}

@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

CSS Progress Bars

CSS Dot Loaders

CSS Circle Loaders

Animated circle loaders HTML CSS

Related Snippets