<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesomes Loadings</title>
<style type="text/css">
.lds-circle {
display: inline-block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
background: red;
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-webkit-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-o-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-moz-animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes lds-circle {
0%, 100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
0% {
transform: rotateY(0deg);
-ms-transform: rotateY(0deg); /* IE 9 */
}
50% {
transform: rotateY(1800deg);
-ms-transform: rotateY(1800deg); /* IE 9 */
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100% {
transform: rotateY(3600deg);
-ms-transform: rotateY(3600deg); /* IE 9 */
}
}
@-webkit-keyframes lds-circle {
0%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Safari 和 Chrome */
}
0% {
-webkit-transform: rotateY(0deg); /* Safari 和 Chrome */
}
50% {
-webkit-transform: rotateY(1800deg); /* Safari 和 Chrome */
-webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Safari 和 Chrome */
}
100% {
-webkit-transform: rotateY(3600deg); /* Safari 和 Chrome */
}
}
/* Firefox */
@-moz-keyframes lds-circle {
0%, 100% {
-moz-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Firefox */
}
0% {
-moz-transform: rotateY(0deg); /* Firefox */
}
50% {
-moz-transform: rotateY(1800deg); /* Firefox */
-moz-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Firefox */
}
100% {
-moz-transform: rotateY(3600deg); /* Firefox */
}
}
@-o-keyframes lds-circle {
0%, 100% {
-o-animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); /* Opera */
}
0% {
-o-transform: rotateY(0deg); /* Opera */
}
50% {
-o-transform: rotateY(1800deg); /* Opera */
-o-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); /* Opera */
}
100% {
-o-transform: rotateY(3600deg); /* Opera */
}
}
</style>
</head>
<body>
<div class="lds-circle"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesomes Loadings</title>
<style type="text/css">
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
/* Loading CSS 样式 */
.bg-rotate-loader {
width: 50px;
height: 50px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 5px solid #B8D0FA;
border-top-color: #0052EC;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
-webkit-animation: loader-rotate 1s linear infinite;
}
@keyframes loader-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-rotate {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<!-- Loading HTML-->
<div class="bg-rotate-loader"></div>
</div>
</body>
</html>
<style type="text/css">
.lds-default {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-default div {
position: absolute;
width: 6px;
height: 6px;
background: red;
border-radius: 50%;
animation: lds-default 1.2s linear infinite;
-webkit-animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
top: 37px;
left: 66px;
}
.lds-default div:nth-child(2) {
animation-delay: -0.1s;
-webkit-animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.lds-default div:nth-child(3) {
animation-delay: -0.2s;
-webkit-animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.lds-default div:nth-child(4) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.lds-default div:nth-child(5) {
animation-delay: -0.4s;
-webkit-animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.lds-default div:nth-child(6) {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
top: 22px;
left: 11px;
}
.lds-default div:nth-child(7) {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.lds-default div:nth-child(8) {
animation-delay: -0.7s;
-webkit-animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.lds-default div:nth-child(9) {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.lds-default div:nth-child(10) {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.lds-default div:nth-child(11) {
animation-delay: -1s;
-webkit-animation-delay: -1s;
top: 62px;
left: 52px;
}
.lds-default div:nth-child(12) {
animation-delay: -1.1s;
-webkit-animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes lds-default {
0%, 20%, 80%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
/* Safari 和 Chrome */
@-webkit-keyframes lds-default {
0%, 20%, 80%, 100% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
}
}
</style>
<div class="lds-default">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style type="text/css">
.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid red;
border-color: red transparent red transparent;
animation: lds-dual-ring 1.2s linear infinite;
-webkit-animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-dual-ring {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
<div class="lds-dual-ring"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesomes Loadings</title>
<style type="text/css">
.container {
position: absolute;
top: 0;
left: 80px;
bottom: 0;
right: 0;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
/* Loading CSS 样式 */
.pacman {
position: relative;
transform: scale(1);
}
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s -0.99s infinite linear;
animation: pacman-balls 1s -0.99s infinite linear;
}
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s -0.66s infinite linear;
animation: pacman-balls 1s -0.66s infinite linear;
}
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s -0.33s infinite linear;
animation: pacman-balls 1s -0.33s infinite linear;
}
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear;
}
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #c2d411;
border-left: 25px solid #c2d411;
border-bottom: 25px solid #c2d411;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
animation: rotate_pacman_half_up 0.5s 0s infinite;
position: relative;
left: -30px;
}
.pacman > div:nth-child(2) {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #c2d411;
border-left: 25px solid #c2d411;
border-bottom: 25px solid #c2d411;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
animation: rotate_pacman_half_down 0.5s 0s infinite;
margin-top: -50px;
position: relative;
left: -30px;
}
.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
background-color: #c2d411;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 70px;
}
@-webkit-keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@keyframes rotate_pacman_half_up {
0% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
@-webkit-keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@keyframes rotate_pacman_half_down {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
@keyframes pacman-balls {
75% {
opacity: 0.7;
}
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px);
}
}
</style>
</head>
<body>
<div class="container">
<!-- Loading HTML-->
<div class="pacman">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
<style type="text/css">
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ellipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: red;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
-webkit-animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
-webkit-animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
-webkit-animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
-webkit-animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
@-webkit-keyframes lds-ellipsis1 {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes lds-ellipsis3 {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0);
}
}
@-webkit-keyframes lds-ellipsis2 {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(24px, 0);
}
}
</style>
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
