117 Loading effects for pure CSS

preface

Due to the large number of special effects, I divided it into three parts (39 special effects each), and this is the next part.

117 Loading Effects with Pure CSS (Part 1)

117 Loading Effects with Pure CSS (Middle)

117 Loading Effects for Pure CSS (part 2)

Here are 117 Loading effects I’ve found around the world over the past few decades (79-117 in this post), and they’re pure CSS.

This article does not explain the principles (a new article may be published later), but just the code, so you can feel the pleasure of copy-pasting.

❤️❤️ like to give this text a thumbs up ~

Online display

Warehouse code Star

79

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #ff3d00 transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

80

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after,
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #ff3d00;
  width: 6px;
  height: 6px;
  transform: translate(150%.150%);
  border-radius: 50%;
}

.loading:before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  transform: translate(-150%, -150%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

81

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after,
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #ff3d00;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.loading:before {
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

82

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #ddd #ddd transparent;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent #ff3d00 #ff3d00;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -webkit-animation: rotationBack 0.5 s linear infinite;
  animation: rotationBack 0.5 s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg); }}</style>
Copy the code

83

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #ddd #ddd transparent transparent;
  animation: rotation 1s linear infinite;
}

.loading:after,
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #ff3d00 #ff3d00;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-animation: rotationBack 0.5 s linear infinite;
  animation: rotationBack 0.5 s linear infinite;
  transform-origin: center center;
}

.loading:before {
  width: 32px;
  height: 32px;
  border-color: #ddd #ddd transparent transparent;
  -webkit-animation: rotation 1.5 s linear infinite;
  animation: rotation 1.5 s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg); }}</style>
Copy the code

84

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px dotted #ddd;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 2s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #ff3d00;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

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

  100% {
    transform: rotate(-360deg); }}</style>
Copy the code

85

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  background: #ff3d00;
  width: 3px;
  height: 24px;
  transform: translateX(-50%);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

86

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: linear-gradient(0deg.rgba(255.61.0.0.2) 33%.#ff3d00 100%);
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

87

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #ff3d00;
  border-right: 3px solid transparent;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

88

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #ddd;
  border-right: 4px solid transparent;
  animation: rotation 1s linear infinite;
}

.loading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-bottom: 4px solid #ff3d00;
  border-left: 4px solid transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

89

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px solid #ddd;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 30px;
  top: 32px;
  border: 10px solid transparent;
  border-right-color: #ddd;
  transform: rotate(-40deg);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

90

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border-width: 3px;
  border-style: dashed solid solid dotted;
  border-color: #ff3d00 #ff3d00 transparent #ff3d00;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 30px;
  top: 32px;
  border: 10px solid transparent;
  border-right-color: #ff3d00;
  transform: rotate(-40deg);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

91

<div class="loading"></div>

<style>
.loading {
  border: 24px solid #ddd;
  border-bottom-color: #ff3d00;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

92

<div class="loading"></div>

<style>
.loading {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: # 666;
  left: -100px;
  animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
  0% {
    box-shadow: 0px 0 rgba(255.255.255.0), 0px 0 rgba(255.255.255.0),
      0px 0 rgba(255.255.255.0), 0px 0 rgba(255.255.255.0);
  }

  12% {
    box-shadow: 100px 0 # 666.0px 0 rgba(255.255.255.0),
      0px 0 rgba(255.255.255.0), 0px 0 rgba(255.255.255.0);
  }

  25% {
    box-shadow: 110px 0 # 666.100px 0 # 666.0px 0 rgba(255.255.255.0),
      0px 0 rgba(255.255.255.0);
  }

  36% {
    box-shadow: 120px 0 # 666.110px 0 # 666.100px 0 # 666.0px 0 rgba(255.255.255.0);
  }

  50% {
    box-shadow: 130px 0 # 666.120px 0 # 666.110px 0 # 666.100px 0 # 666;
  }

  62% {
    box-shadow: 200px 0 rgba(255.255.255.0), 130px 0 # 666.120px 0 # 666.110px 0 # 666;
  }

  75% {
    box-shadow: 200px 0 rgba(255.255.255.0), 200px 0 rgba(255.255.255.0),
      130px 0 # 666.120px 0 # 666;
  }

  87% {
    box-shadow: 200px 0 rgba(255.255.255.0), 200px 0 rgba(255.255.255.0),
      200px 0 rgba(255.255.255.0), 130px 0 # 666;
  }

  100% {
    box-shadow: 200px 0 rgba(255.255.255.0), 200px 0 rgba(255.255.255.0),
      200px 0 rgba(255.255.255.0), 200px 0 rgba(255.255.255.0); }}</style>
Copy the code

93

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}

.loading::after..loading::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 2s ease-in-out infinite;
}

.loading::after {
  border-color: #ff3d00;
  animation-delay: 1s;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

94

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
}

.loading::after..loading::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 2px solid #ddd;
  position: absolute;
  left: 0;
  top: 0;
  animation: rotation 2s ease-in-out infinite alternate;
}

.loading::after {
  border-color: #ff3d00;
  animation-direction: alternate-reverse;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

95

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border: 2px solid #ddd;
  animation: rotation 2s linear infinite;
}

.loading:after,
.loading:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid #ff3d00;
  width: 38px;
  height: 38px;
  animation: rotationBack 1.5 s linear infinite;
  transform-origin: center center;
}

.loading:before {
  width: 28px;
  height: 28px;
  border-color: #ddd;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

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

  100% {
    transform: rotate(-360deg); }}</style>
Copy the code

96

<div class="loading"></div>

<style>
.loading {
  width: 16px;
  height: 16px;
  box-shadow: 0 30px.0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: inline-block;
  position: relative;
  color: #ddd;
  left: -30px;
  animation: loading-animation 2s ease infinite;
}

.loading::after..loading::before {
  content: "";
  width: 16px;
  height: 16px;
  box-shadow: 0 30px.0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: #ddd;
  position: absolute;
  left: 30px;
  top: 0;
  animation: loading-animation 2s 0.2 s ease infinite;
}

.loading::before {
  animation-delay: 0.4 s;
  left: 60px;
}

@keyframes loading-animation {
  0% {
    top: 0;
    color: #ddd;
  }
  50% {
    top: 30px;
    color: rgba(255.255.255.0.2);
  }
  100% {
    top: 0;
    color: #ddd; }}</style>
Copy the code

97

<div class="loading"></div>

<style>
.loading {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: currentColor;
  color: #ddd;
  animation: loading-animation-m 0.3 s 0.3 s linear infinite alternate;
}

.loading::after..loading::before {
  content: "";
  width: 8px;
  height: 40px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 20px;
  animation: loading-animation 0.3 s 0.45 s linear infinite alternate;
}

.loading::before {
  left: -20px;
  animation-delay: 0s;
}

@keyframes loading-animation-m {
  0% {
    height: 40px;
    transform: translateY(0);
  }

  100% {
    height: 10px;
    transform: translateY(30px); }}@keyframes loading-animation {
  0% {
    height: 48px;
  }

  100% {
    height: 4.8 px.; }}</style>
Copy the code

98

<div class="loading"></div>

<style>
.loading {
  width: 8px;
  height: 40px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: currentColor;
  color: #ddd;
  animation: loading-animation 0.3 s 0.3 s linear infinite alternate;
}

.loading::after..loading::before {
  content: "";
  width: 8px;
  height: 40px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  animation: loading-animation 0.3 s 0.45 s linear infinite alternate;
}

.loading::before {
  left: -20px;
  animation-delay: 0s;
}

@keyframes loading-animation {
  0% {
    height: 48px;
  }
  100% {
    height: 4.8 px.; }}</style>
Copy the code

99

<div class="loading"></div>

<style>
.loading {
  width: 8px;
  height: 48px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  left: -40px;
  animation: loading-animation 1s linear infinite alternate;
}

@keyframes loading-animation {
  0% {
    box-shadow: 20px 0 rgba(255.255.255.0.25), 40px 0 #ddd.60px 0 #ddd;
  }

  50% {
    box-shadow: 20px 0 #ddd.40px 0 rgba(255.255.255.0.25), 60px 0 #ddd;
  }

  100% {
    box-shadow: 20px 0 #ddd.40px 0 #ddd.60px 0 rgba(255.255.255.0.25); }}</style>
Copy the code

100

<div class="loading"></div>

<style>
.loading {
  width: 8px;
  height: 48px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  left: -40px;
  color: #ddd;
  animation: loading-animation 0.6 s linear infinite;
}

@keyframes loading-animation {
  0% {
    box-shadow: 20px -10px.40px 10px.60px 0px;
  }

  25% {
    box-shadow: 20px 0px.40px 0px.60px 10px;
  }

  50% {
    box-shadow: 20px 10px.40px -10px.60px 0px;
  }

  75% {
    box-shadow: 20px 0px.40px 0px.60px -10px;
  }

  100% {
    box-shadow: 20px -10px.40px 10px.60px 0px; }}</style>
Copy the code

101

<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 6px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  top: -30px;
  color: #ddd;
  animation: loading-animation 0.6 s linear infinite;
}

@keyframes loading-animation {
  0% {
    box-shadow: -10px 20px.10px 35px.0px 50px;
  }

  25% {
    box-shadow: 0px 20px.0px 35px.10px 50px;
  }

  50% {
    box-shadow: 10px 20px, -10px 35px.0px 50px;
  }

  75% {
    box-shadow: 0px 20px.0px 35px, -10px 50px;
  }

  100% {
    box-shadow: -10px 20px.10px 35px.0px 50px; }}</style>
Copy the code

102

<div class="loading"></div>

<style>
.loading {
  width: 4.8 px.;
  height: 4.8 px.;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  color: #ddd;
  background: currentColor;
  animation: loading-animation 0.3 s 0.3 s linear infinite alternate;
}

.loading::after..loading::before {
  content: "";
  width: 4.8 px.;
  height: 4.8 px.;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 15px;
  animation: loading-animation 0.3 s 0.45 s linear infinite alternate;
}

.loading::after {
  top: -15px;
  animation-delay: 0s;
}

@keyframes loading-animation {
  0% {
    width: 4.8 px.;
  }

  100% {
    width: 48px; }}</style>
Copy the code

103

<div class="loading"></div>

<style>
.loading {
  width: 4.8 px.;
  height: 4.8 px.;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  color: #ddd;
  background: currentColor;
  animation: loading-animation 0.3 s 0.3 s linear infinite alternate;
}

.loading::after..loading::before {
  content: "";
  width: 4.8 px.;
  height: 4.8 px.;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  animation: loading-animation 0.3 s 0.45 s linear infinite alternate;
}

.loading::after {
  top: -15px;
  animation-delay: 0s;
}

@keyframes loading-animation {
  0% {
    width: 4.8 px.;
  }

  100% {
    width: 48px; }}</style>
Copy the code

104

<div class="loading"></div>

<style>
.loading {
  width: 8px;
  height: 48px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  left: -60px;
  animation: loading-animation 1s linear infinite alternate;
}

@keyframes loading-animation {
  0% {
    box-shadow: 20px 0 rgba(255.255.255.0), 40px 0 rgba(255.255.255.0),
      60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.0),
      100px 0 rgba(255.255.255.0);
  }

  20% {
    box-shadow: 20px 0 #ddd.40px 0 rgba(255.255.255.0),
      60px 0 rgba(255.255.255.0), 80px 0 rgba(255.255.255.0),
      100px 0 rgba(255.255.255.0);
  }

  40% {
    box-shadow: 20px 0 #ddd.40px 0 #ddd.60px 0 rgba(255.255.255.0),
      80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.0);
  }

  60% {
    box-shadow: 20px 0 #ddd.40px 0 #ddd.60px 0 #ddd.80px 0 rgba(255.255.255.0), 100px 0 rgba(255.255.255.0);
  }

  80% {
    box-shadow: 20px 0 #ddd.40px 0 #ddd.60px 0 #ddd.80px 0 #ddd.100px 0 rgba(255.255.255.0);
  }

  100% {
    box-shadow: 20px 0 #ddd.40px 0 #ddd.60px 0 #ddd.80px 0 #ddd.100px 0 #ddd; }}</style>
Copy the code

105

<div class="loading"></div>

<style>
.loading {
  width: 20px;
  height: 12px;
  display: inline-block;
  position: relative;
  border-radius: 4px;
  color: #ddd;
  background: currentColor;
  animation: loading-animation 0.6 s 0.3 s ease infinite alternate;
}

.loading::after..loading::before {
  content: "";
  width: 20px;
  height: 12px;
  background: currentColor;
  position: absolute;
  border-radius: 4px;
  top: 0;
  right: 110%;
  animation: loading-animation 0.6 s ease infinite alternate;
}

.loading::after {
  left: 110%;
  right: auto;
  animation-delay: 0.6 s;
}

@keyframes loading-animation {
  0% {
    width: 20px;
  }

  100% {
    width: 48px; }}</style>
Copy the code

106

<div class="loading">Loading</div>

<style>
.loading {
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ff3d00;
  letter-spacing: 2px;
  position: relative;
}

.loading::after {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: loading-animation 6s linear infinite;
}

@keyframes loading-animation {
  0% {
    height: 100%;
  }

  100% {
    height: 0%; }}</style>
Copy the code

107

<div class="loading">Loading</div>

<style>
.loading {
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ff3d00;
  letter-spacing: 2px;
  position: relative;
}

.loading::after {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  text-shadow: 0 0 2px #ff3d00.0 0 1px #ff3d00.0 0 1px #ff3d00;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: loading-animation 6s linear infinite;
}

@keyframes loading-animation {
  0% {
    height: 100%;
  }
  100% {
    height: 0%; }}</style>
Copy the code

108

<div class="loading">Loading</div>

<style>
.loading {
  display: inline-block;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #ff3d00.0 0 1px #ff3d00.0 0 1px #ff3d00;
  letter-spacing: 2px;
  position: relative;
}

.loading::after {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff3d00;
  width: 0%;
  height: 100%;
  overflow: hidden;
  animation: loading-animation 6s linear infinite;
}

@keyframes loading-animation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%; }}</style>
Copy the code

109

<div class="loading">L &nbsp; ading</div>

<style>
.loading {
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ddd;
  position: relative;
}

.loading::before {
  content: "";
  position: absolute;
  left: 0.714285 em;
  bottom: 0.214285 em;
  width: 0.285714 em;
  height: 0.285714 em;
  border-radius: 50%;
  border: 0.142857 em solid #ddd;
  border-bottom-color: #ff3d00;
  animation: rotation 0.6 s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg); }}</style>
Copy the code

110

<div class="loading">Load&nbsp;ng</div>

<style>
.loading {
  display: inline-block;
  color: #ddd;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: 0.083333 em;
}

.loading::before {
  content: "";
  position: absolute;
  right: 1.458333 em;
  bottom: 0.408333 rem;
  height: 0.583333 em;
  width: 0.104166 em;
  background: currentColor;
  animation: loading-animation-l 1s linear infinite alternate;
}

.loading::after {
  content: "";
  width: 0.208333 rem;
  height: 0.208333 rem;
  position: absolute;
  left: 2.604166 em;
  top: 0.041666 em;
  border-radius: 50%;
  background: red;
  animation: loading-animation 1s linear infinite alternate;
}

@keyframes loading-animation-l {
  0% {
    box-shadow: 0 -0.125 em, -2.583333 em -0.145833 em;
  }

  25%.75% {
    box-shadow: 0 0px, -2.583333 em -0.145833 em;
  }

  100% {
    box-shadow: 0 0px, -2.583333 em -0.333333 em; }}@keyframes loading-animation {
  0% {
    transform: translate(0px.0px) scaleX(1);
  }

  14% {
    transform: translate(-0.25 em, -0.333333 em) scaleX(1.05);
  }

  28% {
    transform: translate(-0.5625 em, -0.583333 em) scaleX(1.07);
  }

  42% {
    transform: translate(-0.958333 em, -0.729166 em) scaleX(1.1);
  }

  57% {
    transform: translate(-1.458333 em, -0.770833 em) scaleX(1.1);
  }

  71% {
    transform: translate(-1.958333 em, -0.666666 em) scaleX(1.07);
  }

  85% {
    transform: translate(-2.3125 em, -0.458333 em) scaleX(1.05);
  }

  100% {
    transform: translate(-2.604166 em, -0.1875 em) scaleX(1); }}</style>
Copy the code

111

<div class="loading">Load&nbsp;ng</div>

<style>
.loading {
  display: inline-block;
  color: #ddd;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: 0.083333 em;
}

.loading::before {
  content: "";
  position: absolute;
  right: 1.458333 em;
  bottom: 0.208333 em;
  height: 0.583333 em;
  width: 0.104166 em;
  background: currentColor;
}

.loading::after {
  content: "";
  width: 0.16666 em;
  height: 0.16666 em;
  position: absolute;
  left: 2.62 em;
  top: 0.041666 em;
  border-radius: 50%;
  background: red;
  animation: loading-animation 1s ease-in infinite;
}

@keyframes loading-animation {
  0% {
    transform: translateY(0.16666 em) scaleY(1) scaleX(1.25);
  }

  25%.75% {
    transform: translateY(-0.104166 em) scaleY(1.2) scaleX(1);
  }

  50% {
    transform: translateY(-0.208333 em) scaleY(1) scaleX(1);
  }

  100% {
    transform: translateY(0.16666 em) scaleY(0.8) scaleX(0.8); }}</style>
Copy the code

112

<div class="loading">Loading</div>

<style>
.loading {
  display: inline-block;
  color: #ddd;
  position: relative;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.loading::after {
  content: "";
  width: 3px;
  height: 3px;
  background: currentColor;
  position: absolute;
  bottom: 6px;
  right: -5px;
  animation: loading-animation 1s linear infinite;
}

@keyframes loading-animation {
  0% {
    box-shadow: 10px 0 rgba(255.255.255.0), 20px 0 rgba(255.255.255.0);
  }

  50% {
    box-shadow: 10px 0 #ddd.20px 0 rgba(255.255.255.0);
  }

  100% {
    box-shadow: 10px 0 #ddd.20px 0 #ddd; }}</style>
Copy the code

113

<div class="loading">Load&nbsp;ng</div>

<style>
.loading {
  display: inline-block;
  color: #ddd;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: 4px;
}

.loading::before {
  content: "";
  position: absolute;
  right: 45px;
  bottom: 7px;
  height: 14px;
  width: 3.5 px.;
  background: currentColor;
}

.loading::after {
  content: "";
  width: 4px;
  height: 4px;
  background: currentColor;
  position: absolute;
  right: 44.8 px.;
  animation: loading-animation 0.6 s ease-out infinite alternate;
}

@keyframes loading-animation {
  0% {
    top: 6px;
    transform: rotate(0deg) scale(1);
  }

  100% {
    top: -2px;
    transform: rotate(180deg) scale(1.5); }}</style>
Copy the code

114

<div class="loading">Load&nbsp;ng</div>

<style>
.loading {
  display: inline-block;
  color: #ddd;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: 4px;
}

.loading::before {
  content: "";
  position: absolute;
  right: 45px;
  bottom: 8px;
  height: 14px;
  width: 4px;
  outline: 1px solid #ddd;
  color: #ff3d00;
  animation: loading-animation-b 1s linear infinite alternate;
}

.loading::after {
  content: "";
  width: 4px;
  height: 4px;
  background: #ff3d00;
  position: absolute;
  right: 45px;
  top: 8px;
  animation: loading-animation-a 1s ease-out infinite alternate;
}

@keyframes loading-animation-b {
  0% {
    box-shadow: 0 0 inset;
  }

  100% {
    box-shadow: 0 -16pxinset; }}@keyframes loading-animation-a {
  0% {
    top: 2px;
    transform: rotate(0deg) scale(1);
  }

  100% {
    top: -4px;
    transform: rotate(180deg) scale(1.5); }}</style>
Copy the code

115

<div class="loading"></div>

<style>
.loading {
  display: inline-block;
  position: relative;
}

.loading::before {
  content: "Loading";
  color: # 666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  display: inline-block;
  animation: floating 1s ease-out infinite alternate;
}

.loading::after {
  content: "";
  width: 100%;
  height: 10px;
  background: rgba(0.0.0.0.15);
  position: absolute;
  left: 0;
  top: 100%;
  filter: blur(4px);
  border-radius: 50%;
  animation: loading-animation 1s ease-out infinite alternate;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-25px); }}@keyframes loading-animation {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1.2); }}</style>
Copy the code

116

<div class="loading">Loading</div>

<style>
.loading {
  font-size: 28px;
  letter-spacing: 2px;
  font-family: Arial, Helvetica, sans-serif;
  color: # 666;
  animation: loading-animation 1s ease-in infinite alternate;
}

@keyframes loading-animation {
  0% {
    filter: blur(0px);
    transform: skew(0deg);
  }

  100% {
    filter: blur(3px);
    transform: skew(-4deg); }}</style>
Copy the code

117

<div class="loading">Loading</div>

<style>
.loading {
  display: inline-block;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ff3d00;
  letter-spacing: 2px;
  position: relative;
}

.loading::after {
  content: "Loading";
  position: absolute;
  left: 0;
  top: 0;
  color: #ddd;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: loading-animation 10s ease-in infinite;
}

@keyframes loading-animation {
  0% {
    width: 0%;
  }

  100% {
    width: 100%; }}</style>
Copy the code