147 lines
2.8 KiB
HTML
147 lines
2.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>16款纯CSS3实现的loading加载动画</title>
|
|
|
|
<style>
|
|
body {
|
|
background: #f3f6f9;
|
|
font-family: sans-serif;
|
|
font-weight: 100;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
|
|
.grid {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cell {
|
|
float: left;
|
|
width: 25%;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
display: table;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #c3c6cf;
|
|
border-radius: 15px;
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
|
|
<!--加载图标样式-->
|
|
<link rel="stylesheet" href="css/spinners.css" type="text/css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid">
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="spinner-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="throbber-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="refreshing-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="heartbeat-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="gauge-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="timer-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="three-quarters-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="wobblebar-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="atebits-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="whirly-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="flower-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="dots-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="circles-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="plus-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="ball-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cell">
|
|
<div class="card">
|
|
<span class="hexdots-loader">Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |