效果演示

html 代码

<link rel="stylesheet" href="index.css"><div class="wrap go">
    <div class="loader bar"> <!-- google now -->
      <div class="blue"></div>
      <div class="yellow"></div>
      <div class="green"></div>
      <div class="red"></div>
    </div>
    <div class="loader circle"> <!-- gmail -->
      <div class="blue"></div>
      <div class="red"></div>
      <div class="yellow"></div><div class="green"></div></div><div class="loader orbit"> <!-- moto360 boot screen --><div></div><div></div><div></div><div></div></div></div>

css 代码

* { padding: 0; margin: 0; box-sizing: inherit; }
html { font-size: 10px; }
body { box-sizing: border-box; background: #f2f2f2; }
.red { background-color: #D50F25; }
.yellow { background-color: #EEB211; }
.green { background-color: #009925; }
.blue { background-color: #3369E8; }
.wrap { margin: 0 auto; line-height: 6rem; text-align: center; }
.loader { position: absolute; margin: 0 auto 3rem auto; overflow: hidden; }
.loader > div { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.bar { width: 100%; height: .5rem; top: 0; left: 0; }
.go .loader.bar > div { animation: loading-bar 2s infinite backwards ease-out; }
.bar > div { transform: scaleX(1); }
.loader.bar div:nth-child(1) { animation-delay: -1.5s; }
.loader.bar div:nth-child(2) { animation-delay: -1s; }
.loader.bar div:nth-child(3) { animation-delay: -.5s; }
.loader.bar div:nth-child(4) { animation-delay: 0s; }
@keyframes loading-bar { 0% { transform: scaleX(0); z-index: 15; } 22% { transform: scaleX(0); z-index: 15; } 50% { transform: scaleX(1); } 90% { transform: scaleX(1); z-index: 1; } 100% { transform: scaleX(1); z-index: 0; } }
.circle { height: 2rem; width: 2rem; border-radius: 50%; transform: scale(1); top: 3rem; right: 3rem; margin: auto; }
.circle > div { height: 100%; width: 100%; border-radius: 50%; }
.go .loader.circle > div { animation: loading-circle 2s infinite backwards ease-out; }
.loader.circle div:nth-child(1) { animation-delay: -1.5s; transform: translateX(-500%); }
.loader.circle div:nth-child(2) { animation-delay: -1s; transform: translateY(500%); }
.loader.circle div:nth-child(3) { animation-delay: -.5s; transform: translateX(500%); }
.loader.circle div:nth-child(4) { animation-delay: 0s; transform: translateY(-500%); }
@keyframes loading-circle { 0% { z-index: 10; } 75% { transform: translateX(0); z-index: 1; } 100% { transform: translateX(0); z-index: 0; } }
.orbit { height: 20rem; width: 20rem; top: 0; left: 0; bottom: 0; right: 0; margin: auto; overflow: visible; background: #111; border-radius: 50%; }
.orbit > div { top: 2.5rem; left: 2.5rem; font-size: 1rem; height: 15rem; width: 15rem; transform-origin: center center; }
.orbit > div::before { position: absolute; left: calc(50% - .5em); display: block; content: ''; height: 1em; width: 1em; border-radius: 50%; transform: scale(1); }
.orbit > div:nth-child(1)::before { background-color: #3369E8; }
.orbit > div:nth-child(2)::before { background-color: #D50F25; }
.orbit > div:nth-child(3)::before { background-color: #009925; }
.orbit > div:nth-child(4)::before { background-color: #EEB211; }
.go .loader.orbit > div { animation: loading-orbit 6s infinite linear; }
.go .loader.orbit > div::before { animation: loading-orbit-before 2s infinite ease-in-out; }
.loader.orbit > div:nth-child(1) { animation-delay: 0s; }
.loader.orbit > div:nth-child(2) { animation-delay: -.75s; }
.loader.orbit > div:nth-child(3) { animation-delay: -1.5s; }
.loader.orbit > div:nth-child(4) { animation-delay: -2.25s; }
.loader.orbit > div:nth-child(1)::before { animation-delay: 0s; }
.loader.orbit > div:nth-child(2)::before { animation-delay: -.5s; }
.loader.orbit > div:nth-child(3)::before { animation-delay: -1s; }
.loader.orbit > div:nth-child(4)::before { animation-delay: -1.5s; }
@keyframes loading-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes loading-orbit-before { 0% { height: 1em; width: 1em; transform: translate3d(0,0,0); z-index: 5; } 5% { height: 1.25em; width: 1.25em; } 25% { height: 2em; width: 2em; z-index: 10; } 50% { transform: translate3d(1rem,15rem,0); z-index: 0; height: 1em; width: 1em; } 100% { transform: translate3d(0,0,0); z-index: 0; height: 1em; width: 1em; } }