9个常用的纯CSS实现加载动画

HTML code


      ‹div class="pulse"›‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.pulse {
width: $loader-size;
height: $loader-size;
margin: 0 auto;
border-radius: 100%;
background-color: white;
opacity: 1;
animation: pulse $animation-duration infinite ease-in-out;
}

@keyframes pulse {
0% {
transform: scale(0);
opacity: .8;
}
100% {
transform: scale(1);
opacity: 0;
}
}

HTML code


      ‹div class="loader"›
‹div class="double-pulse"›‹/div›
‹div class="double-pulse"›‹/div›
‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.loader {
position: relative;
}

.double-pulse {
position: absolute;
top: 0;
left: 0;
width: $loader-size;
height: $loader-size;
margin: 0 auto;
border-radius: 100%;
background-color: white;
opacity: .4;
animation: double-pulse $animation-duration infinite ease-out;

&:nth-of-type(2) {
animation-delay: -350ms;
}
}

@keyframes double-pulse {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}

HTML code


      ‹div class="circle"›‹/div›

SCSS code


      $animation-duration: 1.5s;

.circle {
display: inline-block;
margin: 2.4rem;
outline: 0 none;
border-radius: 100%;
font-size: 1.2rem;
width: 1em;
height: 1em;
animation: circle $animation-duration infinite ease;
}

@keyframes circle {
0%,
100% {
box-shadow: 0em -2em 0em 0em white,
            1.4em -1.4em 0em 0em rgba(white, 0.2),
            2em 0em 0em 0em rgba(white, 0.2),
            1.4em 1.4em 0em 0em rgba(white, 0.2),
            0em 2em 0em 0em rgba(white, 0.2),
            -1.4em 1.4em 0em 0em rgba(white, 0.4),
            -2em 0em 0em 0em rgba(white, 0.6),
            -1.4em -1.4em 0em 0em rgba(white, 0.8);
}

12.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.8),
            1.4em -1.4em 0em 0em white,
            2em 0em 0em 0em rgba(white, 0.2),
            1.4em 1.4em 0em 0em rgba(white, 0.2),
            0em 2em 0em 0em rgba(white, 0.2),
            -1.4em 1.4em 0em 0em rgba(white, 0.2),
            -2em 0em 0em 0em rgba(white, 0.4),
            -1.4em -1.4em 0em 0em rgba(white, 0.6);
}

25% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.6),
            1.4em -1.4em 0em 0em rgba(white, 0.8),
            2em 0em 0em 0em white,
            1.4em 1.4em 0em 0em rgba(white, 0.2),
            0em 2em 0em 0em rgba(white, 0.2),
            -1.4em 1.4em 0em 0em rgba(white, 0.2),
            -2em 0em 0em 0em rgba(white, 0.2),
            -1.4em -1.4em 0em 0em rgba(white, 0.4);
}

37.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.4),
            1.4em -1.4em 0em 0em rgba(white, 0.6),
            2em 0em 0em 0em rgba(white, 0.8),
            1.4em 1.4em 0em 0em white,
            0em 2em 0em 0em rgba(white, 0.2),
            -1.4em 1.4em 0em 0em rgba(white, 0.2),
            -2em 0em 0em 0em rgba(white, 0.2),
            -1.4em -1.4em 0em 0em rgba(white, 0.2);
}

50% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            1.4em -1.4em 0em 0em rgba(white, 0.4),
            2em 0em 0em 0em rgba(white, 0.6),
            1.4em 1.4em 0em 0em rgba(white, 0.8),
            0em 2em 0em 0em white,
            -1.4em 1.4em 0em 0em rgba(white, 0.2),
            -2em 0em 0em 0em rgba(white, 0.2),
            -1.4em -1.4em 0em 0em rgba(white, 0.2);
}

62.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            1.4em -1.4em 0em 0em rgba(white, 0.2),
            2em 0em 0em 0em rgba(white, 0.4),
            1.4em 1.4em 0em 0em rgba(white, 0.6),
            0em 2em 0em 0em rgba(white, 0.8),
            -1.4em 1.4em 0em 0em white,
            -2em 0em 0em 0em rgba(white, 0.2),
            -1.4em -1.4em 0em 0em rgba(white, 0.2);
}

75% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            1.4em -1.4em 0em 0em rgba(white, 0.2),
            2em 0em 0em 0em rgba(white, 0.2),
            1.4em 1.4em 0em 0em rgba(white, 0.4),
            0em 2em 0em 0em rgba(white, 0.6),
            -1.4em 1.4em 0em 0em rgba(white, 0.8),
            -2em 0em 0em 0em white,
            -1.4em -1.4em 0em 0em rgba(white, 0.2);
}

87.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            1.4em -1.4em 0em 0em rgba(white, 0.2),
            2em 0em 0em 0em rgba(white, 0.2),
            1.4em 1.4em 0em 0em rgba(white, 0.2),
            0em 2em 0em 0em rgba(white, 0.4),
            -1.4em 1.4em 0em 0em rgba(white, 0.6),
            -2em 0em 0em 0em rgba(white, 0.8),
            -1.4em -1.4em 0em 0em white;
}
}

HTML code


      ‹div class="fade-circle"›‹/div›

SCSS code


      $animation-duration: 1.5s;

.fade-circle {
display: inline-block;
margin: 2.4rem;
outline: 0 none;
border-radius: 100%;
font-size: 1.2rem;
width: 1em;
height: 1em;
animation: fade-circle $animation-duration infinite ease;
}

@keyframes fade-circle {
0%,
100% {
box-shadow: 0em -2em 0em 0em white,
            1.4em -1.4em 0em 0em rgba(white, 0),
            2em 0em 0em 0em rgba(white, 0),
            1.4em 1.4em 0em 0em rgba(white, 0),
            0em 2em 0em 0em rgba(white, 0.2),
            -1.4em 1.4em 0em 0em rgba(white, 0.4),
            -2em 0em 0em 0em rgba(white, 0.6),
            -1.4em -1.4em 0em 0em rgba(white, 0.8);
}

12.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.8),
            1.4em -1.4em 0em 0em white,
            2em 0em 0em 0em rgba(white, 0),
            1.4em 1.4em 0em 0em rgba(white, 0),
            0em 2em 0em 0em rgba(white, 0),
            -1.4em 1.4em 0em 0em rgba(white, 0.2),
            -2em 0em 0em 0em rgba(white, 0.4),
            -1.4em -1.4em 0em 0em rgba(white, 0.6);
}

25% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.6),
            1.4em -1.4em 0em 0em rgba(white, 0.8),
            2em 0em 0em 0em white,
            1.4em 1.4em 0em 0em rgba(white, 0),
            0em 2em 0em 0em rgba(white, 0),
            -1.4em 1.4em 0em 0em rgba(white, 0),
            -2em 0em 0em 0em rgba(white, 0.2),
            -1.4em -1.4em 0em 0em rgba(white, 0.4);
}

37.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.4),
            1.4em -1.4em 0em 0em rgba(white, 0.6),
            2em 0em 0em 0em rgba(white, 0.8),
            1.4em 1.4em 0em 0em white,
            0em 2em 0em 0em rgba(white, 0),
            -1.4em 1.4em 0em 0em rgba(white, 0),
            -2em 0em 0em 0em rgba(white, 0),
            -1.4em -1.4em 0em 0em rgba(white, 0.2);
}

50% {
box-shadow: 0em -2em 0em 0em rgba(white, 0.2),
            1.4em -1.4em 0em 0em rgba(white, 0.4),
            2em 0em 0em 0em rgba(white, 0.6),
            1.4em 1.4em 0em 0em rgba(white, 0.8),
            0em 2em 0em 0em white,
            -1.4em 1.4em 0em 0em rgba(white, 0),
            -2em 0em 0em 0em rgba(white, 0),
            -1.4em -1.4em 0em 0em rgba(white, 0);
}

62.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0),
            1.4em -1.4em 0em 0em rgba(white, 0.2),
            2em 0em 0em 0em rgba(white, 0.4),
            1.4em 1.4em 0em 0em rgba(white, 0.6),
            0em 2em 0em 0em rgba(white, 0.8),
            -1.4em 1.4em 0em 0em white,
            -2em 0em 0em 0em rgba(white, 0),
            -1.4em -1.4em 0em 0em rgba(white, 0);
}

75% {
box-shadow: 0em -2em 0em 0em rgba(white, 0),
            1.4em -1.4em 0em 0em rgba(white, 0),
            2em 0em 0em 0em rgba(white, 0.2),
            1.4em 1.4em 0em 0em rgba(white, 0.4),
            0em 2em 0em 0em rgba(white, 0.6),
            -1.4em 1.4em 0em 0em rgba(white, 0.8),
            -2em 0em 0em 0em white,
            -1.4em -1.4em 0em 0em rgba(white, 0);
}

87.5% {
box-shadow: 0em -2em 0em 0em rgba(white, 0),
            1.4em -1.4em 0em 0em rgba(white, 0),
            2em 0em 0em 0em rgba(white, 0),
            1.4em 1.4em 0em 0em rgba(white, 0.2),
            0em 2em 0em 0em rgba(white, 0.4),
            -1.4em 1.4em 0em 0em rgba(white, 0.6),
            -2em 0em 0em 0em rgba(white, 0.8),
            -1.4em -1.4em 0em 0em white;
}
}

HTML code


      ‹div class="rectangle"›‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.rectangle {
width: $loader-size;
height: $loader-size;
margin: 0 auto;
background-color: white;
animation: rectangle $animation-duration infinite ease-in-out;
}

@keyframes rectangle {
0% {
transform:perspective(12rem) rotateX(0deg) rotateY(0deg)
}
50% {
transform:perspective(12rem) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform:perspective(12rem) rotateX(-180deg) rotateY(-179.9deg)
}
}

HTML code


      ‹div class="rectangle-bounce"›
‹div class="rect-1"›‹/div›
‹div class="rect-2"›‹/div›
‹div class="rect-3"›‹/div›
‹div class="rect-4"›‹/div›
‹div class="rect-5"›‹/div›
‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.rectangle-bounce {
position: relative;
display: flex;
justify-content: space-between;
width: $loader-size;
height: $loader-size;
transition: all 300ms ease-in-out 0s;
z-index: 1;

.rect-1,
.rect-2,
.rect-3,
.rect-4,
.rect-5 {
width: 15%;
height: 100%;
background-color: white;
animation: rectangle-bounce $animation-duration infinite ease-in-out;
}

.rect-2 {
animation-delay: -$animation-duration + .1;
}
.rect-3 {
animation-delay: -$animation-duration + .2;
}
.rect-4 {
animation-delay: -$animation-duration + .3;
}
.rect-5 {
animation-delay: -$animation-duration + .4;
}
} 

@keyframes rectangle-bounce {
0%, 40%, 100% {
transform:scaleY(0.4);
}
20% {
transform:scaleY(1);
}
}

HTML code


      ‹div class="three"›
‹div class="three-1"›‹/div›
‹div class="three-2"›‹/div›
‹div class="three-3"›‹/div›
‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.threes {
display: flex;
align-items: center;
justify-content: space-between;
width: $loader-size;
height: $loader-size;

.three {
display: inline-flex;
width: 30%;
height: 30%;
border-radius: 100%;
background-color: white;
animation: three $animation-duration infinite ease-in-out both;

&-1 {
  animation-delay: -320ms;
}

&-2 {
  animation-delay: -160ms;
}
}
}

@keyframes three {
0%, 80%, 100% {
transform:scale(0)
}
40% {
transform:scale(1);
}
}

HTML code


      ‹div class="cubes"›
‹div class="cube cube-1"›‹/div›
‹div class="cube cube-2"›‹/div›
‹div class="cube cube-3"›‹/div›
‹div class="cube cube-4"›‹/div›
‹div class="cube cube-5"›‹/div›
‹div class="cube cube-6"›‹/div›
‹div class="cube cube-7"›‹/div›
‹div class="cube cube-8"›‹/div›
‹div class="cube cube-9"›‹/div›
‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 1.5s;

.cubes {
position: relative;
display: flex;
flex-flow: row wrap;
width: $loader-size;
height: $loader-size;
transition: all 300ms ease-in-out 0s;
z-index: 1;

.cube {
width: 33.3333%;
height: 33.3333%;
background-color: white;
animation: cubes $animation-duration infinite ease-in-out;

&-1 {
  animation-delay: .2s;
}

&-2 {
  animation-delay: .3s;
}

&-3 {
  animation-delay: .4s;
}

&-4 {
  animation-delay: .1s;
}

&-5 {
  animation-delay: .2s;
}

&-6 {
  animation-delay: .3s;
}

&-7 {
  animation-delay: 0s;
}

&-8 {
  animation-delay: .1s;
}

&-9 {
  animation-delay: .2s;
}
}
}

@keyframes cubes {
0%, 70%, 100% {
transform:scale3d(1, 1, 1);
}
35% {
transform:scale3d(0, 0, 1);
}
}

HTML code


      ‹div class="diamonds"›
‹div class="diamond diamond-1"›‹/div›
‹div class="diamond diamond-2"›‹/div›
‹div class="diamond diamond-3"›‹/div›
‹div class="diamond diamond-4"›‹/div›
‹/div›

SCSS code


      $loader-size: 5rem;
$animation-duration: 2.4s;

.diamonds {
display: flex;
flex-flow: row wrap;
width: $loader-size;
height: $loader-size;
transform: rotateZ(45deg);

.diamond {
position: relative;
height: 50%;
flex-basis: 50%;
transform: scale(1.1);

&::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $white;
  animation: diamond $animation-duration infinite linear both;
  transform-origin: 100% 100%;
}

&-2 {
  transform: scale(1.1) rotateZ(90deg);

  &::before {
    animation-delay: 300ms;
  }
}

&-3 {
  transform: scale(1.1) rotateZ(180deg);

  &::before {
    animation-delay: 600ms;
  }
}

&-4 {
  transform: scale(1.1) rotateZ(270deg);

  &::before {
    animation-delay: 900ms;
  }
}
}
}

@keyframes diamond {
0%, 10% {
transform:perspective(14rem) rotateX(-180deg);
opacity:0
}
25%, 75% {
transform:perspective(14rem) rotateX(0deg);
opacity:1
}
90%, 100% {
transform:perspective(14rem) rotateY(180deg);
opacity:0
}
}

Single Element CSS Loaders

Pulse

Double pulse

Circle

Fade circle

Rectangle

Rectangle bounce

Three

Cubes

Diamond