loading效果gif图如下:
代码如下:
css:
* {
padding: 0;
margin: 0;
}
.loading_box {
padding-top: 120px;
}
.loading {
position: relative;
width: 400px;
height: 40px;
background-color: #149fee;
border: 1px solid #149fee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-size: 42px 42px;
background-image: -webkit-linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f9 42px);
background-image: -moz-linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f9 42px);
background-image: -o-linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f9 42px);
background-image: -ms-linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f9 42px);
background-image: linear-gradient(-45deg, transparent 0px, transparent 12px, #15d1f9 14px, #15d1f9 30px, transparent 30px, transparent 42px, #15d1f9 42px);
margin: 0 auto;
-webkit-animation: loading 800ms linear infinite;
-moz-animation: loading 800ms linear infinite;
-ms-animation: loading 800ms linear infinite;
animation: loading 800ms linear infinite;
}
.loading:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image: -webkit-linear-gradient(180deg, #149fee, rgba(102, 189, 238, 0.4) 15%, transparent 70%, #149fee);
background-image: -moz-linear-gradient(180deg, #149fee, rgba(102, 189, 238, 0.4) 15%, transparent 70%, #149fee);
background-image: -o-linear-gradient(180deg, #149fee, rgba(102, 189, 238, 0.4) 15%, transparent 70%, #149fee);
background-image: -ms-linear-gradient(180deg, #149fee, rgba(102, 189, 238, 0.4) 15%, transparent 70%, #149fee);
background-image: linear-gradient(180deg, #149fee, rgba(102, 189, 238, 0.4) 15%, transparent 70%, #149fee);
}
@-webkit-keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 42px 0;
}
}
@-moz-keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 42px 0;
}
}
@-ms-keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 42px 0;
}
}
@keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 42px 0;
}
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="loading_box">
<div class="loading"></div>
</div>
</body>
</html>
以上代码复制可以直接运行!