consatan/wave_loading.html

## wave_loading.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <style>
      html, body {
        width: 100%;
        height: 100%;
      }

      .loading div {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
      }

      .loading i {
        display: inline-block;
        height: 14px;
        width: 14px;
        border-radius: 14px;
        margin: 12px;
        position: relative;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
        animation: bouncer cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.75s infinite
          alternate;
      }

      .loading i:nth-child(6n + 1) {
        background: #7f745b;
        animation-delay: 0s;
      }

      .loading i:nth-child(6n + 2) {
        background: #bfa95b;
        animation-delay: 0.1s;
      }

      .loading i:nth-child(6n + 3) {
        background: #d4c787;
        animation-delay: 0.2s;
      }

      .loading i:nth-child(6n + 4) {
        background: #82c0af;
        animation-delay: 0.3s;
      }

      .loading i:nth-child(6n + 5) {
        background: #29526e;
        animation-delay: 0.4s;
      }

      .loading i:nth-child(6n + 6) {
        background: #171f40;
        animation-delay: 0.5s;
      }

      @keyframes bouncer {
        to {
          transform: scale(2.1) translateY(-40px);
        }
      }
    </style>
  </head>
  <body>
    <div class="loading">
      <div><i></i><i></i><i></i><i></i><i></i><i></i></div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	}

	.loading div {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	}

	.loading i {
	display: inline-block;
	height: 14px;
	width: 14px;
	border-radius: 14px;
	margin: 12px;
	position: relative;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
	animation: bouncer cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.75s infinite
	alternate;
	}

	.loading i:nth-child(6n + 1) {
	background: #7f745b;
	animation-delay: 0s;
	}

	.loading i:nth-child(6n + 2) {
	background: #bfa95b;
	animation-delay: 0.1s;
	}

	.loading i:nth-child(6n + 3) {
	background: #d4c787;
	animation-delay: 0.2s;
	}

	.loading i:nth-child(6n + 4) {
	background: #82c0af;
	animation-delay: 0.3s;
	}

	.loading i:nth-child(6n + 5) {
	background: #29526e;
	animation-delay: 0.4s;
	}

	.loading i:nth-child(6n + 6) {
	background: #171f40;
	animation-delay: 0.5s;
	}

	@keyframes bouncer {
	to {
	transform: scale(2.1) translateY(-40px);
	}
	}
	</style>
	</head>
	<body>
	<div class="loading">
	<div><i></i><i></i><i></i><i></i><i></i><i></i></div>
	</div>
	</body>
	</html>