Skip to content

Instantly share code, notes, and snippets.

@seayxu

seayxu/loading-html-css

Last active January 21, 2016 05:46
Show Gist options
  • Save seayxu/00fc20c99fe10a6359b7 to your computer and use it in GitHub Desktop.
Save seayxu/00fc20c99fe10a6359b7 to your computer and use it in GitHub Desktop.
Download ZIP
Loading:html+css
Raw
loading-html-css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>加载效果html+css实现|Loading</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
h3{text-align: center;padding-top: 30px;}
/*begin style-1*/
.loading-1 {
width: 80px;
height: 40px;
margin: 0 auto;
margin-top: 100px;
}
.loading-1 span {
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load-1 1s ease infinite;
}
@-webkit-keyframes load-1 {
0%,
100% {
height: 40px;
background: lightgreen;
}
50% {
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading-1 span:nth-child(2) {
-webkit-animation-delay: 0.2s;
}
.loading-1 span:nth-child(3) {
-webkit-animation-delay: 0.4s;
}
.loading-1 span:nth-child(4) {
-webkit-animation-delay: 0.6s;
}
.loading-1 span:nth-child(5) {
-webkit-animation-delay: 0.8s;
}
/*end style-1*/
/*begin style-2*/
.loading-2{
width: 150px;
height: 4px;
border-radius: 2px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightgreen;
-webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loading-2 span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
margin-top: -7px;
margin-left:-8px;
-webkit-animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes changePosition{
0%{
background: lightgreen;
}
100%{
margin-left: 142px;
background: lightblue;
}
}
/*end style-2*/
/*begin style-3*/
.loading-34{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
}
.loading-3 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
border-radius: 50%;
background: lightgreen;
}
.loading-34-1 span{
-webkit-animation: load-34-1 1.04s ease infinite;
}
.loading-34-2 span{
-webkit-animation: load-34-2 1.04s ease infinite;
}
.loading-34-3 span{
-webkit-animation: load-34-3 1.04s ease infinite;
}
.loading-34 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load-34-1{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes load-34-2{
0%{
opacity: 1;
-webkit-transform: scale(1.3);
}
100%{
opacity: 0.2;
-webkit-transform: scale(.3);
}
}
@-webkit-keyframes load-34-3{
0%{
opacity: 1;
-webkit-transform: translate(0px);
}
100%{
opacity: 0;-webkit-transform: translate(150px);
}
}
.loading-34 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading-34 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading-34 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading-34 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading-34 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
/*end style-3*/
/*begin style-4*/
.loading-4 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
}
/*end style-4*/
/*begin style-5*/
.loading-5{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loading-5 span{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: lightgreen;
position: absolute;
}
.loading-5-1 span{
-webkit-animation: load-5-1 1.04s ease infinite;
}
.loading-5-2 span{
-webkit-animation: load-5-2 1.04s ease infinite;
}
@-webkit-keyframes load-5-1{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
@-webkit-keyframes load-5-2{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loading-5-1 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.13s;
}
.loading-5-1 span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loading-5-1 span:nth-child(3){
left: 50%;
top: 0;
margin-left: -8px;
-webkit-animation-delay:0.39s;
}
.loading-5-1 span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loading-5-1 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-8px;
-webkit-animation-delay:0.65s;
}
.loading-5-1 span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loading-5-1 span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -8px;
-webkit-animation-delay:0.91s;
}
.loading-5-1 span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
.loading-5-2 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loading-5-2 span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loading-5-2 span:nth-child(3){
left: 50%;
top: 0;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loading-5-2 span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loading-5-2 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loading-5-2 span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loading-5-2 span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loading-5-2 span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
/*end style-5*/
/*begin style-6*/
.loading-6{
width: 80px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading-6 span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load-6 1.04s ease infinite;
}
@-webkit-keyframes load-6{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 60px;
margin-top: -20px;
background: lightblue;
}
}
.loading-6 span:nth-child(2){
-webkit-animation-delay:0.13s;
}
.loading-6 span:nth-child(3){
-webkit-animation-delay:0.26s;
}
.loading-6 span:nth-child(4){
-webkit-animation-delay:0.39s;
}
.loading-6 span:nth-child(5){
-webkit-animation-delay:0.52s;
}
/*end style-6*/
/*begin style-7*/
.loading-7{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn-7 2s linear infinite;
}
.loading-7 span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor-7 2s linear infinite;
}
@-webkit-keyframes changeBgColor-7{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn-7{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
/*end style-7*/
/*begin style-8*/
.loading-8{
width: 150px;
height: 15px;
margin: 0 auto;
margin-top:100px;
text-align: center;
}
.loading-8 span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load-8 1.04s ease infinite;
}
.loading-8 span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load-8{
0%{
opacity: 1;
-webkit-transform: scale(1.2);
}
100%{
opacity: .2;
-webkit-transform: scale(.2);
}
}
.loading-8 span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading-8 span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading-8 span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading-8 span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading-8 span:nth-child(5){
-webkit-animation-delay:0.65s;
}
/*end style-8*/
/*begin style-9*/
.loading-9{
width: 150px;
height: 8px;
border-radius: 4px;
margin: 0 auto;
margin-top:100px;
position: relative;
background: lightblue;
overflow: hidden;
}
.loading-9 span{
display:block;
width: 100%;
height: 100%;
border-radius: 3px;
background: lightgreen;
-webkit-animation: changePosition-9 4s linear infinite;
}
@-webkit-keyframes changePosition-9{
0%{
-webkit-transform: translate(-150px);
}
50%{
-webkit-transform: translate(0);
}
100%{
-webkit-transform: translate(150px);
}
}
/*end style-9*/
/*begin style-10*/
.loading-10{
width: 200px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.loading-10 span{
width: 50px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
top: 50%;
margin-top: -15px;
overflow: hidden;
-webkit-animation: changePosition-10 2.08s linear infinite;
}
@-webkit-keyframes changePosition-10{
0%,100%{
-webkit-transform: translate(70px);
}
20%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(0px);
}
30%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(0px);
}
35%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(5px);
background: lightblue;
}
70%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(160px);
}
80%{
width: 20px;
height: 60px;
margin-top:-30px;
-webkit-transform: translate(160px);
}
85%{
width: 50px;
height: 30px;
margin-top:-15px;
-webkit-transform: translate(155px);
background: lightgreen;
}
}
/*end style-10*/
/*begin style-11*/
.loading-11{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
margin-top:100px;
}
.loading-11 span{
display: inline-block;
width: 30px;
height: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background: lightgreen;
position: absolute;
-webkit-animation: load-11 1.04s ease infinite;
}
@-webkit-keyframes load-11{
0%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}
.loading-11 span:nth-child(1){
left: 0;
top: 50%;
margin-top:-5px;
-webkit-animation-delay:0.13s;
}
.loading-11 span:nth-child(2){
left: 10px;
top: 20px;
-webkit-transform: rotate(45deg);
-webkit-animation-delay:0.26s;
}
.loading-11 span:nth-child(3){
left: 50%;
top: 10px;
margin-left: -15px;
-webkit-transform: rotate(90deg);
-webkit-animation-delay:0.39s;
}
.loading-11 span:nth-child(4){
top: 20px;
right:10px;
-webkit-transform: rotate(135deg);
-webkit-animation-delay:0.52s;
}
.loading-11 span:nth-child(5){
right: 0;
top: 50%;
margin-top:-5px;
-webkit-transform: rotate(180deg);
-webkit-animation-delay:0.65s;
}
.loading-11 span:nth-child(6){
right: 10px;
bottom:20px;
-webkit-transform: rotate(225deg);
-webkit-animation-delay:0.78s;
}
.loading-11 span:nth-child(7){
bottom: 10px;
left: 50%;
margin-left: -15px;
-webkit-transform: rotate(270deg);
-webkit-animation-delay:0.91s;
}
.loading-11 span:nth-child(8){
bottom: 20px;
left: 10px;
-webkit-transform: rotate(315deg);
-webkit-animation-delay:1.04s;
}
/*end style-11*/
/*begin style-12*/
.loading-12 {
width: 100px;
height: 100px;
margin: 0 auto;
margin-top:100px;
position: relative;
}
.loading-12 div{
width: 100%;
height: 100%;
position: absolute;
-webkit-animation: load-12 2.08s linear infinite;
}
.loading-12 div span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
@-webkit-keyframes load-12{
0%{
-webkit-transform: rotate(0deg);
}
10%{
-webkit-transform: rotate(45deg);
}
50%{
opacity: 1;
-webkit-transform: rotate(160deg);
}
62%{
opacity: 0;
}
65%{
opacity: 0;
-webkit-transform: rotate(200deg);
}
90%{
-webkit-transform: rotate(340deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
.loading-12 div:nth-child(1){
-webkit-animation-delay:0.2s;
}
.loading-12 div:nth-child(2){
-webkit-animation-delay:0.4s;
}
.loading-12 div:nth-child(3){
-webkit-animation-delay:0.6s;
}
.loading-12 div:nth-child(4){
-webkit-animation-delay:0.8s;
}
/*end style-12*/
/*begin style-13*/
.loading-13{
width: 60px;
height: 60px;
margin: 0 auto;
margin-top:100px;
position: relative;
-webkit-animation: load-13 3s linear infinite;
}
.loading-13 div{
width: 100%;
height: 100%;
position: absolute;
}
.loading-13 span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99CC66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor-13 3s ease infinite;
}
@-webkit-keyframes load-13{
0%{
-webkit-transform: rotate(0deg);
}
33.3%{
-webkit-transform: rotate(120deg);
}
66.6%{
-webkit-transform: rotate(240deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor-13{
0%,100%{
background: #99CC66;
}
33.3%{
background: #FFFF66;
}
66.6%{
background: #FF6666;
}
}
.loading-13 div:nth-child(2){
-webkit-transform: rotate(120deg);
}
.loading-13 div:nth-child(3){
-webkit-transform: rotate(240deg);
}
.loading-13 div:nth-child(2) span{
-webkit-animation-delay: 1s;
}
.loading-13 div:nth-child(3) span{
-webkit-animation-delay: 2s;
}
/*end style-13*/
</style>
</head>
<body>
<h2>HTML+CSS实现的加载效果，来自网络。</h2>
<div>
<h3>效果一</h3>
<div class="loading-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果二</h3>
<div class="loading-2">
<span></span>
</div>
</div>
<div>
<h3>效果三</h3>
<div class="loading-3 loading-34 loading-34-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-3 loading-34 loading-34-2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-3 loading-34 loading-34-3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果四</h3>
<div class="loading-4 loading-34 loading-34-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-4 loading-34 loading-34-2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-4 loading-34 loading-34-3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果五</h3>
<div class="loading-5 loading-5-1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading-5 loading-5-2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果六</h3>
<div class="loading-6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果七</h3>
<div class="loading-7">
<span></span>
</div>
</div>
<div>
<h3>效果八</h3>
<div class="loading-8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果九</h3>
<div class="loading-9">
<span></span>
</div>
</div>
<div>
<h3>效果十</h3>
<div class="loading-10">
<span></span>
</div>
</div>
<div>
<h3>效果十一</h3>
<div class="loading-11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<h3>效果十二</h3>
<div class="loading-12">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</div>
<div>
<h3>效果十三</h3>
<div class="loading-13">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment