268 lines
6.0 KiB
HTML
268 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
|
|
<link rel="stylesheet" type="text/css" href="./loaders.css">
|
|
<title>28个纯css3 加载loading动画特效</title>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
body{ padding:100px;}
|
|
.loader{margin-bottom:50px;min-height:100px;}
|
|
</style>
|
|
|
|
<div class="loaders">
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-scale-pulse-out-rapid">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width:100px;height:75px;background-color: #3498DB; text-align:center;padding-top:25px;"><img src="./oval.svg" width="50" alt=""></div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-pulse">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-grid-pulse">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-clip-rotate">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-clip-rotate-pulse">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner square-spin">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-clip-rotate-multiple">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-pulse-rise">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-rotate">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner cube-transition">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-zig-zag">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-zig-zag-deflect">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-triangle-path">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-scale">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-scale">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-scale-party">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-scale-multiple">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-pulse-sync">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-beat">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-scale-pulse-out">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-scale-pulse-out-rapid">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-scale-ripple">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-scale-ripple-multiple">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-spin-fade-loader">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner line-spin-fade-loader">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner triangle-skew-spin">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner pacman">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loader">
|
|
<div class="loader-inner ball-grid-beat">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |