纯css实现win8 metro 风格loading加载效果代码-html代码-BFW代码库

代码语言：html
代码描述：纯css实现win8 metro 风格loading加载效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
body {
  background: #1d1d1d;
  margin: 5vw auto;
  max-width: 90vw;
}
.loader:nth-child(1) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(1) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #99b433;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(1) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(1) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(1) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(1) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(1) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(2) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(2) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #00a300;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(2) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(2) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(2) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(2) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(2) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(3) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(3) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #1e7145;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(3) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(3) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(3) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(3) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(3) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(4) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(4) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #ff0097;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(4) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(4) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(4) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(4) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(4) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(5) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(5) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #9f00a7;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(5) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(5) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(5) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(5) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(5) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(6) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(6) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #7e3878;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(6) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(6) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(6) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(6) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(6) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(7) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(7) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #603cba;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(7) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(7) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(7) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(7) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(7) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(8) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(8) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #00aba9;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(8) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(8) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(8) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(8) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(8) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(9) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(9) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #eff4ff;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(9) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(9) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(9) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(9) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(9) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(10) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(10) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #2d89ef;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(10) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(10) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(10) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(10) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(10) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(11) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(11) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #2b5797;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(11) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(11) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(11) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(11) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(11) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(12) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(12) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #ffc40d;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0.35, 0.25, 0.65);
}
.loader:nth-child(12) .dot:nth-child(1) {
  animation-delay: 0.12s;
}
.loader:nth-child(12) .dot:nth-child(2) {
  animation-delay: 0.24s;
}
.loader:nth-child(12) .dot:nth-child(3) {
  animation-delay: 0.36s;
}
.loader:nth-child(12) .dot:nth-child(4) {
  animation-delay: 0.48s;
}
.loader:nth-child(12) .dot:nth-child(5) {
  animation-delay: 0.6s;
}
.loader:nth-child(13) {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 48px 24px 24px 48px;
  display: inline-block;
}
.loader:nth-child(13) .dot {
  width: 5.818181818181818px;
  height: 5.818181818181818px;
  border-radius: 100%;
  box-shadow: 0 -32px #e3a21a;
  position: absolute;
  animation: rotate 3.6s infinite cubic-bezier(0.75, 0..........完整代码请登录后点击上方下载按钮下载查看