Css3 Spinner, Preloader

CSS3 spinner, preloader

CSS3 spinner

This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.

This spinner is responsive.

.sp1 {  margin: 50px auto;  position: relative;  width: 30%;  padding-bottom: 30%;  overflow: hidden;  background-color: #557733;  border-radius: 50%;  z-index: 1;}
.sp:before,.sp:after {  content: '';  position: absolute;  height: 100%;  width: 50%;  background-color: #99FF33;}
.sp1:after {  width: 80%;  height: 80%;  margin: 10%;  border-radius: 50%;  background-color: #fff;  z-index: 6;}
.sp1:before {  background-color: inherit;  z-index: 5;}
.sp2:before {  z-index: 4;  -webkit-animation: spin1 3s linear infinite;          animation: spin1 3s linear infinite;  -webkit-transform-origin: 100% 50%;          transform-origin: 100% 50%;}
.sp2:after {  opacity: 0;  right: 0;  z-index: 6;  -webkit-animation: spin2 3s linear infinite;          animation: spin2 3s linear infinite;  -webkit-transform-origin: 0 50%;          transform-origin: 0 50%;}
@-webkit-keyframes spin1 {  0%         { -webkit-transform: rotate(0deg); }  50%, 100%  { -webkit-transform: rotate(180deg); }   }
@keyframes spin1 {  0%         { transform: rotate(0deg); }  50%, 100%  { transform: rotate(180deg); }}
@-webkit-keyframes spin2 {  0% { -webkit-transform: rotate(0deg); opacity: 0; }  49.99% { opacity: 0; }  50% { -webkit-transform: rotate(0deg);  opacity: 1; }  100% { -webkit-transform: rotate(180deg); opacity: 1;  }}
@keyframes spin2 {  0% { transform: rotate(0deg); opacity: 0; }  49.99% { opacity: 0; }  50% { transform: rotate(0deg); opacity: 1; }  100% { transform: rotate(180deg); opacity: 1; }}

<div class="sp sp1">  <div class="sp sp2"></div></div>

CSS animation - spinner/loader speed

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>

Spinner CSS with Rounded Corners

Working sample for the spinner you asked for,

.spinner {
  margin: 50px auto;
  position: relative;
  width: 150px;
  height: 150px
}

.spinner .circle {
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #000;
  animation: rotate linear infinite;
  position: absolute
}

.spinner .circle.one {
  width: 50px;
  height: 50px;
  left: 50px;
  top: 50px;
  animation-duration: .8s
}

.spinner .circle.two {
  width: 75px;
  height: 75px;
  left: 38px;
  top: 38px;
  animation-duration: .7s
}

.spinner .circle.three {
  width: 100px;
  height: 100px;
  left: 25px;
  top: 25px;
  animation-duration: 1s
}

@keyframes rotate {
  form {
    transform: rotate(0deg)
  }
 
  to {
    transform: rotate(360deg)
  }
}

<div class="spinner">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
</di

Resize css spinner

This can be done very easily via CSS scale transforms:

#floatingBarsG {
    -webkit-transform:scale(2);
    -webkit-transform-origin:top left;
    -moz-transform:scale(2);
    -moz-transform-origin:top left;
    -ms-transform:scale(2);
    -ms-transform-origin:top left;
    -o-transform:scale(2);
    -o-transform-origin:top left;
    transform:scale(2);
    transform-origin:top left;
}

Demo.

Edit from 8 years after posting this answer: Nowadays, all of these prefixes are no longer necessary, so simply using the following would suffice:

#floatingBarsG {
    transform:scale(2);
    transform-origin:top left;
}

css loading spinner not spinning

You can animate the transform property:

.bWDkpr {
  height: 120px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.dCPhrt {
  width: 40px;
  height: 40px;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: initial;
  animation-fill-mode: initial;
  animation-play-state: initial;
  animation-name: cZxgpV;
}

.hsiYVK {
  fill: transparent;
  stroke: rgb(186, 199, 213);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 128px;
  stroke-dashoffset: 64px;
}

@keyframes cZxgpV {
  from {
    transform: rotate(360deg);
  }
}

<div class="Loading__StyledLoading bWDkpr">
  <svg viewBox="0 0 40 40" class="Loading__StyledSpinner dCPhrt">
    <circle cx="50%" cy="50%" r="18" type="pageLoader" class="Loading__StyledSpinnerCircle hsiYVK"></circle>
  </svg>
  <div type="pageLoader" class="Loading__StyledLoadingText dpesEv"></div>
</div>

---

Related Topics