1.
loading.gif
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<style>
*{margin:0;padding: 0}
.round{
position: absolute;
margin-left: -5px;
margin-top: -5px;
width: 10px;
height: 10px;
box-sizing: border-box;
border-radius: 50%;
}
.round1{
top: 50%;
left: 52%;
background: #ff6c6e;
animation:mymove 0.5s 0s infinite alternate;
}
.round2{
top: 50%;
left: 48%;
background: #5bc6ab;
animation:mymove2 0.5s 0s infinite alternate;
}
.round3{
top: 48%;
left: 50%;
background: #ec7546;
animation:mymove3 1s 0s infinite alternate;
}
.round4{
top: 52%;
left: 50%;
background: #8364a4;
animation:mymove4 1s 0s infinite alternate;
}
@keyframes mymove{
from{left: 52%;transform:rotate(0deg)}
to{left: 48%;transform:rotate(360deg);border-color: #159de3}
}
@keyframes mymove2{
from{left: 48%;transform:rotate(0deg)}
to{left: 52%;transform:rotate(360deg);border-color: blue}
}
@keyframes mymove3{
from{top: 48%;transform:rotate(0deg)}
to{top: 52%;transform:rotate(360deg);border-color: green}
}
@keyframes mymove4{
from{top: 52%;transform:rotate(0deg)}
to{top: 48%;transform:rotate(360deg);border-color: #159dd6}
}
</style>
<body>
<div class="round round1"></div>
<div class="round round2"></div>
<div class="round round3"></div>
<div class="round round4"></div>
</body>
</html>
2.
loading.gif
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<style>
* {
margin: 0;
padding: 0
}
.box {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: #159de3;
border-radius: 5%;
animation: change 1s infinite ease-in-out alternate;
}
@keyframes change {
from {
transform: rotate(0deg);
}
to {
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: red;
transform: rotate(360deg);
}
}
.loading {
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
font-weight: bold;
color: #fff;
animation: text 1s infinite ease-in-out alternate;
}
@keyframes text {
from {
transform: scale(2);
}
to {
transform: scale(1.5);
}
}
.shadow {
position: absolute;
width: 200px;
height: 2px;
left: 50%;
margin-left: -100px;
top: 65%;
border-radius: 50%;
background: #000;
animation: shadows 1s infinite ease-in-out alternate;
transform: scale(1);
}
@keyframes shadows {
from {
transform: scale(1);
}
to {
transform: scale(0.5);
}
}
</style>
<body>
<div class="box"></div>
<div class="shadow"></div>
<p class="loading">Loading</p>
</body>
</html>
3.
loading.gif
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>波浪</title>
</head>
<style>
html,body{width: 100%;height: 100%;overflow: hidden;background: #999;}
*{margin: 0;padding: 0;}
.round{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
text-align: center;
border-radius: 50%;
z-index: 2;
animation: lo 1.5s infinite forwards alternate ;
}
.bitBox{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
border-radius: 50%;
background: #fff;
transform: rotate(0deg);
animation: rou 1.5s infinite forwards ;
}
.bit{
position: absolute;
width: 10%;
height: 10%;
border-radius: 50%;
background: rgba(255,255,255,0.3);
animation: rou 1.5s infinite forwards ;
}
.loading{
color: #000;
text-shadow: 0px 0px 5px #000;
font-weight: bold;
}
@keyframes rou{
from{
transform: rotate(0deg);
background: rgba(255,255,255,0.3);
}
to{
transform: rotate(360deg);
background: rgba(255,255,255,1);
}
}
@keyframes lo{
from{
background: rgba(255,255,255,0.1);
}
to{
background: rgba(255,255,255,1);
}
}
</style>
<body>
<div class="round">
<span class="loading">Loading</span>
</div>
<div class="bitBox">
<div class="bit" style="top: -15px;left: 45%;"></div>
<div class="bit" style="right: -15px;top: 45%;"></div>
<div class="bit" style="bottom: -15px;left: 45%;"></div>
<div class="bit" style="left: -15px;top: 45%;"></div>
</div>
</body>
</html>
