CSS Loading Animation

2025年1月12日 | 阅读10分钟

引言

当有访问者访问我们的网页时，他们点击按钮，然后他们期望来自开发者方面的某种反馈。如果来自开发者的反馈缺失，那么用户可能会认为可能有什么不对劲。而且，在发生任何事情之前，他们很快就会离开网站。

我们可以通过使用加载动画来防止这种情况。借助加载动画，我们可以为用户提供更好的用户界面，让他们知道后台正在进行某个过程。

什么是加载动画？

在 CSS 中，加载动画只不过是一种向用户发出的通知，可以确保用户系统仍在处理他们的请求。当用户在请求完成之前点击按钮时，动画就会加载。

此外，一些动画带有进度条，指示请求完成的剩余时间。这还提供了实时更新，减少了用户的无聊感。有很多工具可以用来创建加载动画。但 CSS 是创建加载动画的最佳实践。

CSS 加载动画

我们还可以借助其他语言（如 JavaScript 或简单的 GIF 加载器）来创建动画加载器。然而，CSS 在创建动画加载器方面提供了一些优势。这些优势如下。

我们可以轻松编辑它。我们还可以快速编辑动画的时长、颜色、速度和其他动画元素。
如果我们改变动画的缩放比例，那么它就不会失去其质量。
如果我们使用图形处理单元，那么它将使动画快速而流畅。
我们还可以使用 `animation-play-state` 属性暂停动画。

某些浏览器，例如 Internet Explorer 9 和 Opera Mini，可能不支持加载动画。如果出现这种情况，我们必须使用 GIF。

CSS 加载动画示例

互联网上有许多不同类型的加载动画。让我们看一些例子。

1. 翻斗车加载动画

我们可以用下面的 HTML 代码创建这个动画。

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dump Truck Loading Animation</title>
  <style>
   

*, *:before, *:after {
 border: 0;
 box-sizing: border-box;
margin: 0;
 padding: 0;
}

:root {
 font-size: 20px;
}

body {
 background: #87beff;
 color: #222;
 font: 1em "Anton", sans-serif;
 line-height: 1.5;
 overflow-x: hidden;
}

/* all */
.progress-container, .progress-state, .dump-truck, .dump-truck div {
 position: absolute;
}

/* progress */
.progress-container, .progress-box {
 width: 6em;
}

.progress-container {
 top: 50%;
 left: calc(50% - 3em);
 height: 7.5em;
 z-index: 2;
}

.progress-box {
 border-radius: 0 0 0.5em 0.5em;
 border: 0.5em solid #505050;
 border-top: 0;
 height: 4em;
}

.progress-fill {
 animation: fillDirt 10s linear forwards;
 background: #643232;
 transform: scaleY(0);
 transform-origin: 50% 100%;
 transition: transform 0.5s ease-out;
 width: 100%;
 height: 100%;
}

.progress-state {
 bottom: 0;
 left: 0;
 font-size: 1.5em;
 text-align: center;
}

.state-load {
 animation: hideLoad 20s linear forwards;
}

.state-finish {
 animation: showFinish 0.3s 20s linear forwards;
 visibility: hidden;
}

/* trucks */
.dump-truck {
 opacity: 0;
 top: calc(50% - 4em);
 width: 14em;
 height: 8em;
}
.dump-truck:nth-of-type(2) {
 animation: backupL 10s ease-in-out 2 forwards;
 right: 50%;
 transform: scaleX(-1) translateX(5em);
}
.dump-truck:nth-of-type(2) .bucket {
 animation: dump 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt {
 animation: rotateDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt-spill {
 animation: pourDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .wheel {
 animation: spinL 10s ease-in-out 2;
}
.dump-truck:last-of-type {
 animation: backupR 10s 5s ease-in-out 2 forwards;
 left: 50%;
 transform: translateX(5em);
}
.dump-truck:last-of-type .bucket {
 animation: dump 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt {
 animation: rotateDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt-spill {
 animation: pourDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .wheel {
 animation: spinR 10s 5s ease-in-out 2;
}

.front {
 background: linear-gradient(#ff3f30, #ff3f30) 2.7em 0.75em/0.2em 2em, linear-gradient(#a0a0a0, #a0a0a0) 1em 3.5em/0.8em 0.2em, linear-gradient(#505050, #505050) 3.3em 6.1em/0.5em 0.2em, linear-gradient(#505050, #505050) 3.3em 6.8em/0.5em 0.2em, linear-gradient(83deg, #282828 49%, rgba(40, 40, 40, 0) 50%) 1em 0.75em/5em 2em, radial-gradient(3.4em 4.6em at 33% 100%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 59%, rgba(255, 255, 255, 0) 60%), radial-gradient(3.4em 4.6em at 33% 100%, rgba(255, 63, 48, 0) 49%, #ff3f30 50%);
 background-repeat: no-repeat;
 border-radius: 10% 20% 5% 25%/10% 50% 5% 100%;
 top: 0.4em;
 left: 10.1em;
 width: 3.9em;
 height: 7em;
}

.bucket {
 background: repeating-linear-gradient(95deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0.85em, rgba(0, 0, 0, 0.15) 0.9em, rgba(0, 0, 0, 0.15) 1.75em, rgba(0, 0, 0, 0.15) 1.8em) 0.1em 1.6em/7.8em 3.2em, linear-gradient(#505050, #505050) 8em 0/2em 0.5em, linear-gradient(95deg, rgba(80, 80, 80, 0) 0.45em, #505050 0.5em, #505050 1.45em, rgba(80, 80, 80, 0) 1.5em) 7em 0/1.6em 5.5em, linear-gradient(rgba(80, 80, 80, 0) 1em, #505050 1em) 0 0/7.5em 5.5em;
 background-repeat: no-repeat;
 border-radius: 0 0 0 25%/0 0 0 15%;
 top: 0;
 left: 0;
 width: 10em;
 height: 5.5em;
 transform: rotate(0deg);
 transform-origin: 22% 100%;
}

.dirt {
 background: #643232;
 border-radius: 0 0 50% 50%/0 0 100% 100%;
 top: 1.1em;
 left: -3.2em;
 width: 7.4em;
 height: 3em;
 transform: rotate(-25deg);
 transform-origin: 50% 0;
 z-index: -1;
}

.dirt-spill {
 background: #643232;
 border-radius: 0.4em;
 top: 0;
 left: -5.25em;
 transform: rotate(-40deg) scale(1, 1);
 transform-origin: 5.25em 0em;
 width: 5.5em;
 height: 0.8em;
}

.base {
 background: #7f5b58;
 border-radius: 0.25em;
 top: 5.5em;
 left: 2em;
 width: 8.3em;
 height: 1.5em;
}

.wheel {
 background: radial-gradient(100% 100%, #282828 9%, rgba(40, 40, 40, 0) 10%), radial-gradient(100% 100%, #a0a0a0 29%, rgba(160, 160, 160, 0) 30%), linear-gradient(90deg, rgba(255, 255, 255, 0.15) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(100% 100%, #282828 49%, rgba(40, 40, 40, 0) 50%);
 border-radius: 50%;
 bottom: 0;
 width: 2.4em;
 height: 2.4em;
}

.wheel-front {
 left: 10.4em;
}

.wheel-middle {
 left: 4.5em;
}

.wheel-back {
 left: 2em;
}

/* animations */
@keyframes backup {
 from, 50%, to {
  opacity: 0;
  transform: scaleX(-1) translateX(20em);
 }
 12.5%, 37.5% {
  opacity: 1;
  transform: scaleX(-1) translateX(5em);
 }
}
@keyframes backup {
 from, 50%, to {
  opacity: 0;
  transform: translateX(20em);
 }
 12.5%, 37.5% {
  opacity: 1;
  transform: translateX(5em);
 }
}
@keyframes dump {
 from, 12.5%, 37.5%, to {
  transform: rotate(0deg);
 }
 20%, 30% {
  transform: rotate(-40deg);
 }
}
@keyframes rotateDirt {
 from, 19.9%, 30.1%, to {
  opacity: 0;
 }
 20%, 30% {
  opacity: 1;
  transform: rotate(-40deg);
 }
 25% {
  transform: rotate(-25deg);
 }
}
@keyframes pourDirt {
 from, 20% {
  transform: rotate(-40deg) scale(0, 0);
 }
 25% {
  transform: rotate(-40deg) scale(1, 1);
 }
 30%, to {
  transform: rotate(-25deg) scale(0.8, 0);
 }
}
@keyframes spinL {
 from, 50%, to {
  transform: rotate(-0.5turn);
 }
 12.5%, 37.5% {
  transform: rotate(-2.5turn);
 }
}
@keyframes spinR {
 from, 50%, to {
  transform: rotate(0);
 }
 12.5%, 37.5% {
  transform: rotate(-2turn);
 }
}
@keyframes hideLoad {
 from {
  visibility: visible;
 }
 to {
  visibility: hidden;
 }
}
@keyframes showFinish {
 from {
  transform: scale(0);
  visibility: visible;
 }
 80% {
  transform: scale(1.2);
 }
 to {
  transform: scale(1);
  visibility: visible;
 }
}

 
 
 
  </style>
</head>
<body>

<div class="progress-container">
  <div class="progress-box">
    <div class="progress-fill"></div>
  </div>
  <div class="progress-state state-load">Loading?</div>
  <div class="progress-state state-finish">Complete!</div>
</div>
<div class="dump-truck">
  <div class="front"></div>
  <div class="bucket"></div>
  <div class="dirt">
    <div class="dirt-spill"></div>
  </div>
  <div class="base"></div>
  <div class="wheel wheel-front"></div>
  <div class="wheel wheel-middle"></div>
  <div class="wheel wheel-back"></div>
</div>
<div class="dump-truck">
  <div class="front"></div>
  <div class="bucket"></div>
  <div class="dirt">
    <div class="dirt-spill"></div>
  </div>
  <div class="base"></div>
  <div class="wheel wheel-front"></div>
  <div class="wheel wheel-middle"></div>
  <div class="wheel wheel-back"></div>
</div>
<script>

  window.addEventListener("DOMContentLoaded", loading)
  function loading() {
   var percents = [0.25,0.5,0.75,1],
    step = 0,
    truckLoopDur = 10,
     fill = function() {
     let fillEl = document.querySelector(".progress-fill");
     fillEl.style.transform = "scaleY(" + percents[step] + ")";
     ++step;

     if (step < percents.length) {
      setTimeout(fill, (truckLoopDur * 1e3)/2);
     }
     };
   setTimeout(fill, (truckLoopDur * 1e3)/4);
  }

</script>

</body>
</html>

输出

2. 彩虹加载器

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 

.loader {
  background: #000;
  background: radial-gradient(#222, #000);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}

.loader-inner {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

.loader-line-wrap {
  animation: 
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
 ;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}

@keyframes spin {
  0%, 15% {
  transform: rotate(0);
 }
 100% {
  transform: rotate(360deg);
 }
}

</style>
<body>
 

<div class="loader">
 <div class="loader-inner">
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
 </div>
</div>

</body>
</html>

输出

3. 圆圈内的正方形 - 加载动画

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  

body {
 display:flex;
 align-items:center;
 height:100vh;
 background-color:#001524;
}

.container {
 display:block;
 height:300px;
 width:300px;
 margin:0 auto;
}
.baton {
 display:block;
 height:2px;
 width:70px;
 background-color:#459fa5;
 animation: scale 1.25s infinite linear;
 -webkit-transform-origin: 0;
 -moz-transform-origin: 0;
 -ms-transform-origin: 0;
 -o-transform-origin: 0;
 transform-origin: 0;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 transform: rotate(-10deg);
 &:before {
  content:'';
  display:block;
  height:5px;
  width:5px;
  background-color:#f5a51c;
  position:absolute;
  top:-2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
 }
 &:after {
  content:'';
  display:block;
  height:5px;
  width:5px;
  background-color:#f5a51c;
  position:absolute;
  top:-2px;
  right:0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
 }
}

.metronome {
 -webkit-transform-origin: 0;
 -moz-transform-origin: 0;
 -ms-transform-origin: 0;
 -o-transform-origin: 0;
 transform-origin: 0;
 animation: metronome 1.25s infinite linear;
}

@for $i from 0 through 35 {
 .baton-#{$i} {
  height:1px;
  width:150px;
  position:absolute;
  top:calc(50% - 8px);
  -webkit-transform-origin: 100%;
  -moz-transform-origin: 100%;
  -ms-transform-origin: 100%;
  -o-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: rotate($i * 10deg);
  -moz-transform: rotate($i * 10deg);
  -ms-transform: rotate($i * 10deg);
  -o-transform: rotate($i * 10deg);
  .baton, .baton:after, .metronome {
   animation-delay: -$i * 0.14s;
  }
 }
}

@keyframes metronome {
 0% {
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg); }
 50% {
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  transform: rotate(25deg); }
 100% {
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  transform: rotate(-25deg); }
}

@keyframes scale {
 0% {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1); }
 25% {
  -webkit-transform: scaleX(0.74);
  -moz-transform: scaleX(0.74);
  -ms-transform: scaleX(0.74);
  -o-transform: scaleX(0.74);
  transform: scaleX(0.74); }
 50% {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1); }
 75% {
  -webkit-transform: scaleX(1.16);
  -moz-transform: scaleX(1.16);
  -ms-transform: scaleX(1.16);
  -o-transform: scaleX(1.16);
  transform: scaleX(1.16); }
 100% {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1); }
 }
 </style>
</head>
<body>
 

<div class="container">
   <div class="baton-0"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-1"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-2"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-3"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-4"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-5"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-6"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-7"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-8"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-9"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-10"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-11"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-12"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-13"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-14"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-15"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-16"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-17"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-18"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-19"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-20"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-21"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-22"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-23"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-24"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-25"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-26"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-27"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-28"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-29"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-30"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-31"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-32"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-33"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-34"><div class="metronome"><div class="baton"></div></div></div>
   <div class="baton-35"><div class="metronome"><div class="baton"></div></div></div>
</div>

</body>
</html>

输出

4. 单个元素纯 CSS 绝对居中覆盖旋转器

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      

/* Absolute Center Spinner */
.loading {
 position: fixed;
 z-index: 999;
 height: 2em;
 width: 2em;
 overflow: visible;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

/* Transparent Overlay */
.loading:before {
 content: '';
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
 /* hide "loading..." text */
 font: 0/0 a;
 color: transparent;
 text-shadow: none;
 background-color: transparent;
 border: 0;
}

.loading:not(:required):after {
 content: '';
 display: block;
 font-size: 10px;
 width: 1em;
 height: 1em;
 margin-top: -0.5em;
 -webkit-animation: spinner 1500ms infinite linear;
 -moz-animation: spinner 1500ms infinite linear;
 -ms-animation: spinner 1500ms infinite linear;
 -o-animation: spinner 1500ms infinite linear;
 animation: spinner 1500ms infinite linear;
 border-radius: 0.5em;
 -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
 box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
 0% {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}
@-moz-keyframes spinner {
 0% {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}
@-o-keyframes spinner {
 0% {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}
@keyframes spinner {
 0% {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
 }
}

   </style>
</head>
<body>
   

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

</body>
</html>

输出

下一个主题CSS 宽高比

CSS Loading Animation

引言

什么是加载动画？

CSS 加载动画

CSS 加载动画示例

1. 翻斗车加载动画

2. 彩虹加载器

3. 圆圈内的正方形 - 加载动画

4. 单个元素纯 CSS 绝对居中覆盖旋转器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Loading Animation

引言

什么是加载动画？

CSS 加载动画

CSS 加载动画示例

1. 翻斗车加载动画

2. 彩虹加载器

3. 圆圈内的正方形 - 加载动画

4. 单个元素纯 CSS 绝对居中覆盖旋转器

相关帖子

Selection CSS

Bootstrap Table CSS

如何在 CSS 中编写内联悬停效果

CSS Text Replace

CSS vs CSS3

CSS Hover Transitions

CSS 中的背景图片叠加渐变

CSS Rotate Text

FreeCodeCamp HTML CSS

Removing Underline from the Link in CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器