HTML5+CSS3 loading 效果收集
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5+CSS3 loading 效果收集相关的知识，希望对你有一定的参考价值。
参考技术A用gif图片来做loading的时代已经过去了，它显得太low了，而用html5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。
这里收集了几十个用html5和css3实现的loading效果，以供学习参考。
01. CSS Rainbow Loader
02. Single element Slack loader
03. Pure CSS3 loader
04. CSS Cog loader
05. VSCO – CSS loader
06. Cube CSS Loader
07. CSS Loader
08. Tumblr-style cog loaders
09. CSS Weather Loader
10. Chrome Cast CSS Loader
11. CSS3 Loaders
12. Android 4.4 Kitkat loader
13. CSS loaders kit
14. CSS creative loading
15. CSS Loading Animation
16. Logo Loader
17. Loaders collection by Loaders.css
18. CSS Water filling Loader
19. CSS loader
20. Animated CSS3 Loading Bar
21. CSS loading text animation
22. Simple Loader
23. CSS Loading animation
24. CSS loader
25. Pushing pixels CSS loader
26. CSS Loader
27. CSS Loaders
28. Random Loader
29. Single element CSS spinners
30. Simple CSS loader
31. SpinKit – CSS loaders
32. Modern Google Loader
33. 2D and 3D Block Loaders
34. 12 free SVG loaders
35. Page Loading Effects
36. Pace.js – Page Load Progress Bars
37. Loading SVG loaders
38. Material Design preloader
css3实现loading效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@media only screen and (min-width:320px){
.loading,
.spinner{ width:30px; height:30px; }
.loading{margin-left:-15px; margin-top:-15px;}
.container1 > div,
.container2 > div,
.container3 > div {width: 9px; height: 9px;}
}
@media only screen and (min-width:640px){
.loading,
.spinner{ width:50px; height:50px; }
.loading{margin-left:-25px; margin-top:-25px;}
.container1 > div,
.container2 > div,
.container3 > div {width: 15px; height: 15px;}
}
@media only screen and (min-width:1000px){
.loading,
.spinner{ width:80px; height:80px; }
.loading{margin-left:-40px; margin-top:-40px;}
.container1 > div,
.container2 > div,
.container3 > div {width: 25px; height: 25px;}
}
.loading{ position:absolute; top:50%; left:50%;}
.spinner {
margin: 0 auto;
position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
background-color: #1267cb;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
</style>
</head>
<body>
<div class="loading_animate">
</div>
<div class="loading">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</body>
</html>
以上是关于HTML5+CSS3 loading 效果收集的主要内容，如果未能解决你的问题，请参考以下文章