loading效果图如下:
代码如下:
* {
padding: 0;
margin: 0;
}
body {
background: #ffffff;
}
.wrap {
position: relative;
width: 200px;
height: 250px;
margin: 30px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 30px 1px #273aca inset;
box-shadow: 0 0 30px 1px #273aca inset;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
margin-top: -44px;
margin-left: -44px;
}
.loading .outer {
display: block;
width: 80px;
height: 80px;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 4px solid #273aca;
border-left-color: transparent;
border-bottom: 0;
-webkit-animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
animation: loading 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
.loading .inner {
width: 46px;
height: 46px;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 4px solid #273aca;
border-top-color: transparent;
border-right: 0;
margin-top: -27px;
margin-left: -27px;
position: absolute;
top: 50%;
left: 50%;
-webkit-animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
animation: loadingInner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loadingInner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes loadingInner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>
<body>
<div class="wrap">
<div class="loading">
<span class="outer"></span>
<span class="inner"></span>
</div>
</div>
<body>
</html>
以上代码可以直接复制运行!