Create ajax loader icon in CSS3

Two CSS3 attributes used in this article: transform and animation

I. HTML

<div class="ajax-loading">    <div class="bar1"></div>    <div class="bar2"></div>    <div class="bar3"></div>    <div class="bar4"></div>    <div class="bar5"></div>    <div class="bar6"></div>    <div class="bar7"></div>    <div class="bar8"></div></div>

Ii. CSS

.ajax-loading {    position: relative;    width: 100px;    height: 100px;    margin: 25px;    -webkit-transform: scale(0.5);    transform: scale(0.5);    -webkit-animation: rotateThis 1s infinite step-start;    animation: rotateThis 1s infinite step-start;}.ajax-loading div {    position: absolute;    top: 35px;    left: 45px;    width: 10px;    height: 30px;    background: #000;}.ajax-loading div.bar1 {    -webkit-transform: rotate(0deg) translate(0, -40px);    transform: rotate(0deg) translate(0, -40px);    opacity: 0.12;}.ajax-loading div.bar2 {    -webkit-transform: rotate(45deg) translate(0, -40px);    transform: rotate(45deg) translate(0, -40px);    opacity: 0.25;}.ajax-loading div.bar3 {    -webkit-transform: rotate(90deg) translate(0, -40px);    transform: rotate(90deg) translate(0, -40px);    opacity: 0.37;}.ajax-loading div.bar4 {    -webkit-transform: rotate(135deg) translate(0, -40px);    transform: rotate(135deg) translate(0, -40px);    opacity: 0.5;}.ajax-loading div.bar5 {    -webkit-transform: rotate(180deg) translate(0, -40px);    transform: rotate(180deg) translate(0, -40px);    opacity: 0.62;}.ajax-loading div.bar6 {    -webkit-transform: rotate(225deg) translate(0, -40px);    transform: rotate(225deg) translate(0, -40px);    opacity: 0.75;}.ajax-loading div.bar7 {    -webkit-transform: rotate(270deg) translate(0, -40px);    transform: rotate(270deg) translate(0, -40px);    opacity: 0.87;}.ajax-loading div.bar8 {    -webkit-transform: rotate(315deg) translate(0, -40px);    transform: rotate(315deg) translate(0, -40px);    opacity: 1;}@-webkit-keyframes rotateThis {  0% {-webkit-transform:scale(0.5) rotate(0deg);}  12.5% {-webkit-transform:scale(0.5) rotate(45deg);}  25% {-webkit-transform:scale(0.5) rotate(90deg);}  37.5% {-webkit-transform:scale(0.5) rotate(135deg);}  50% {-webkit-transform:scale(0.5) rotate(180deg);}  62.5% {-webkit-transform:scale(0.5) rotate(225deg);}  75% {-webkit-transform:scale(0.5) rotate(270deg);}  87.5% {-webkit-transform:scale(0.5) rotate(315deg);}  100% {-webkit-transform:scale(0.5) rotate(360deg);}}@keyframes rotateThis {  0% {transform:scale(0.5) rotate(0deg);}  12.5% {transform:scale(0.5) rotate(45deg);}  25% {transform:scale(0.5) rotate(90deg);}  37.5% {transform:scale(0.5) rotate(135deg);}  50% {transform:scale(0.5) rotate(180deg);}  62.5% {transform:scale(0.5) rotate(225deg);}  75% {transform:scale(0.5) rotate(270deg);}  87.5% {transform:scale(0.5) rotate(315deg);}  100% {transform:scale(0.5) rotate(360deg);}}

Iii. Ideas

1. transform controls the offset of each small square on the Y axis, rotate controls the rotation angle, and scale to half of the original size;

2. The opacity differs by about 0.12 between each small square to achieve gradient effect;

3. Set the offset between top and left to control the center of the center;

4. Set the rotation animation rotateThis for the entire square and define eight time points;

5. Set the animation-timing-function to step-start. The animation gradient is not allowed;