CSS3 spinner, preloader

问题

I would like to build a animated spinner with CSS3. It should behave like this :

After the last state it should start again like in the first state.

I managed to create circles using the technique explained here : stackoverflow question

Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.

回答1:

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>

Fiddle demo

来源：https://stackoverflow.com/questions/24484727/css3-spinner-preloader

标签

css

css3

css-animations

css-transforms

css-shapes