常见的几种loding效果实现

<head>

<title>Loading</title>

<style>

.loader {

float: left;

}

.loader {

position: relative;

width: 5rem;

height: 5rem;

}

.loader.small {

-webkit-transform: scale(.5);

transform: scale(.5);

}

.loader.circle-line,

.loader.circle-round {

height: 5rem;

}

/*circle-line*/

.loader.circle-line span {

position: absolute;

display: inline-block;

width: 1.5rem;

height: .5rem;

border-top-left-radius: .25rem;

border-bottom-left-radius: .25rem;

background: #1ABC9C;

opacity: .05;

-webkit-animation: circle-line 1s ease infinite;

animation: circle-line 1s ease infinite;

}

.loader.circle-line span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.25rem;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.circle-line span:nth-child(2) {

top: 1rem;

left: .5rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.circle-line span:nth-child(3) {

left: 50%;

top: .5rem;

margin-left: -.75rem;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.circle-line span:nth-child(4) {

right: .5rem;

top: 1rem;

-webkit-transform: rotate(145deg);

transform: rotate(145deg);

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.circle-line span:nth-child(5) {

left: 3.5rem;

top: 50%;

margin-top: -.25rem;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

.loader.circle-line span:nth-child(6) {

bottom: 1rem;

right: .5rem;

-webkit-transform: rotate(-145deg);

transform: rotate(-145deg);

-webkit-animation-delay: .78s;

animation-delay: .78s;

}

.loader.circle-line span:nth-child(7) {

left: 50%;

bottom: .5rem;

margin-left: -15px;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

-webkit-animation-delay: .91s;

animation-delay: .91s;

}

.loader.circle-line span:nth-child(8) {

bottom: 1rem;

left: .5rem;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation-delay: 1.04s;

animation-delay: 1.04s;

}

@keyframes circle-line {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@-webkit-keyframes circle-line {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

/*circle-line-spin*/

.loader.circle-line-spin .circle-line-inner {

width: 100%;

height: 100%;

-webkit-animation: circle-line-spin 1.5s linear infinite;

animation: circle-line-spin 1.5s linear infinite;

}

.loader.circle-line-spin span {

position: absolute;

display: inline-block;

width: 1.5rem;

height: .5rem;

border-top-left-radius: .25rem;

border-bottom-left-radius: .25rem;

background: #1ABC9C;

opacity: .7;

}

.loader.circle-line-spin span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.25rem;

}

.loader.circle-line-spin span:nth-child(2) {

top: 1rem;

left: .5rem;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

.loader.circle-line-spin span:nth-child(3) {

left: 50%;

top: .5rem;

margin-left: -.75rem;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.loader.circle-line-spin span:nth-child(4) {

right: .5rem;

top: 1rem;

-webkit-transform: rotate(145deg);

transform: rotate(145deg);

}

.loader.circle-line-spin span:nth-child(5) {

left: 3.5rem;

top: 50%;

margin-top: -.25rem;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.loader.circle-line-spin span:nth-child(6) {

bottom: 1rem;

right: .5rem;

-webkit-transform: rotate(-145deg);

transform: rotate(-145deg);

}

.loader.circle-line-spin span:nth-child(7) {

left: 50%;

bottom: .5rem;

margin-left: -15px;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

}

.loader.circle-line-spin span:nth-child(8) {

bottom: 1rem;

left: .5rem;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

@keyframes circle-line-spin {

0% {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

@-webkit-keyframes circle-line-spin {

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

}

/*circle-round*/

.loader.circle-round span {

opacity: .05;

-webkit-animation: circle-round 1s ease infinite;

animation: circle-round 1s ease infinite;

}

.loader.circle-round-fade span {

-webkit-animation: circle-round-fade 1s ease infinite;

animation: circle-round-fade 1s ease infinite;

}

.loader.circle-round span,

.loader.circle-round-fade span {

position: absolute;

width: .8rem;

height: .8rem;

display: inline-block;

border-radius: 50%;

background: #1ABC9C;

}

.loader.circle-round span:nth-child(1),

.loader.circle-round-fade span:nth-child(1) {

top: 50%;

left: 0;

margin-top: -.4rem;

-webkit-animation-delay: -1.04s;

animation-delay: -1.04s;

}

.loader.circle-round span:nth-child(2),

.loader.circle-round-fade span:nth-child(2) {

top: .7rem;

left: .7rem;

-webkit-animation-delay: -.91s;

animation-delay: -.91s;

}

.loader.circle-round span:nth-child(3),

.loader.circle-round-fade span:nth-child(3) {

top: 0;

left: 50%;

margin-left: -.4rem;

-webkit-animation-delay: -.78s;

animation-delay: -.78s;

}

.loader.circle-round span:nth-child(4),

.loader.circle-round-fade span:nth-child(4) {

right: .7rem;

top: .7rem;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

.loader.circle-round span:nth-child(5),

.loader.circle-round-fade span:nth-child(5) {

right: 0;

top: 50%;

margin-top: -.4rem;

-webkit-animation-delay: -.52s;

animation-delay: -.52s;

}

.loader.circle-round span:nth-child(6),

.loader.circle-round-fade span:nth-child(6) {

bottom: .7rem;

right: .7rem;

-webkit-animation-delay: -.39s;

animation-delay: -.39s;

}

.loader.circle-round span:nth-child(7),

.loader.circle-round-fade span:nth-child(7) {

bottom: 0;

left: 50%;

margin-left: -.4rem;

-webkit-animation-delay: -.26s;

animation-delay: -.26s;

}

.loader.circle-round span:nth-child(8),

.loader.circle-round-fade span:nth-child(8) {

left: .7rem;

bottom: .7rem;

-webkit-animation-delay: -.13s;

animation-delay: -.13s;

}

@keyframes circle-round {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@-webkit-keyframes circle-round {

0% {

opacity: .05;

}

100% {

opacity: .7;

}

@keyframes circle-round-fade {

0% {

opacity: .25;

transform: scale(.2);

}

100% {

opacity: 1;

transform: scale(1);

}

@-webkit-keyframes circle-round-fade {

0% {

opacity: .25;

transform: scale(.2);

}

100% {

opacity: 1;

transform: scale(1);

}

/*line-square*/

.loader.line-square {

width: 6rem;

height: .8rem;

}

.loader.line-square span {

position: absolute;

top: 0;

width: .8rem;

height: .8rem;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-square 1s ease infinite;

animation: line-square 1s ease infinite;

}

.loader.line-square span:nth-child(1) {

left: 0;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.line-square span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.line-square span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.line-square span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.line-square span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

@keyframes line-square {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

@-webkit-keyframes line-square {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

/*line-round*/

.loader.line-round {

width: 6rem;

height: .8rem;

}

.loader.line-round span {

position: absolute;

top: 0;

width: .8rem;

height: .8rem;

border-radius: 50%;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-round 1s ease infinite;

animation: line-round 1s ease infinite;

}

.loader.line-round span:nth-child(1) {

left: 0;

-webkit-animation-delay: .13s;

animation-delay: .13s;

}

.loader.line-round span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: .26s;

animation-delay: .26s;

}

.loader.line-round span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: .39s;

animation-delay: .39s;

}

.loader.line-round span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: .52s;

animation-delay: .52s;

}

.loader.line-round span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: .65s;

animation-delay: .65s;

}

@keyframes line-round {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

@-webkit-keyframes line-round {

0% {

opacity: 1;

transform: scale(1.2);

-webkit-transform: scale(1.2);

}

100% {

opacity: .2;

transform: scale(.2);

-webkit-transform: scale(.2);

}

/*line-bounce*/

.loader.line-bounce {

width: 6rem;

height: 2.5rem;

}

.loader.line-bounce span {

position: absolute;

top: 0;

width: .5rem;

height: 2.5rem;

border-radius: 5px;

display: inline-block;

background: #1ABC9C;

-webkit-animation: line-bounce 1s ease infinite;

animation: line-bounce 1s ease infinite;

}

.loader.line-bounce span:nth-child(1) {

left: 0;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

.loader.line-bounce span:nth-child(2) {

left: 1.3rem;

-webkit-animation-delay: -.78s;

animation-delay: -.78s;

}

.loader.line-bounce span:nth-child(3) {

left: 2.6rem;

-webkit-animation-delay: -.91s;

animation-delay: -.91s;

}

.loader.line-bounce span:nth-child(4) {

left: 3.9rem;

-webkit-animation-delay: -.78s;

animation-delay: -78s;

}

.loader.line-bounce span:nth-child(5) {

left: 5.2rem;

-webkit-animation-delay: -.65s;

animation-delay: -.65s;

}

@keyframes line-bounce {

0% {

transform: scaleY(1);

}

50% {

transform: scaleY(.3);

}

100% {

transform: scaleY(1);

}

@-webkit-keyframes line-bounce {

0% {

-webkit-transform: scaleY(1);

}

50% {

-webkit-transform: scaleY(.3);

}

100% {

-webkit-transform: scaleY(1);

}

/*circle-spin*/

.loader.circle-spin {

border-radius: 50%;

border: .2rem solid rgba(0, 0, 0, .05);

width: 4rem;

height: 4rem;

box-sizing: content-box;

}

.loader.circle-spin .loader-placeholder {

position: absolute;

top: -.2rem;

left: -.2rem;

border-radius: 50%;

border: .2rem solid transparent;

border-top: .2rem solid #1ABC9C;

width: 4rem;

height: 4rem;

box-sizing: content-box;

-webkit-animation: circle-spin 1s ease infinite;

animation: circle-spin 1s ease infinite;

}

@keyframes circle-spin {

0% {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

@-webkit-keyframes circle-spin {

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c18695.shtml