hdjs
Version:
hdjs framework
151 lines (132 loc) • 3.48 kB
HTML
<html>
<head>
<title>CSS加载动画</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>
<script>
window.hdjs = {};
window.hdjs.base = '../';
window.hdjs.uploader = 'php/uploader.php?';
window.hdjs.filesLists = 'php/filesLists.php?';
</script>
<script src="../dist/static/requirejs/require.js"></script>
<script src="../dist/static/requirejs/config.js"></script>
</head>
<body>
<script>
require(['hdjs'],function(hdjs){
hdjs.spinners();
})
</script>
<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>