有时候我们网页由于数据量大或者是网络速度原因导致请求速度慢，会出现一些空白的页面，使得用户体验不是很好，所以网站都会设置一个预加载效果，即加载之前先让他加载一个动画，二后台继续加载未加载出来的内容，当页面加载完数据后动画消失内容显示，这样就是的我们用户体验很好。

接下来给大家分享的是9个纯css加载动画效果，废话不多说直接上代码。

先看一下效果图：

HTML代码

csss代码

.ouro {

position: relative;

display: inline-block;

height: 46px;

width: 46px;

margin: 1em;

border-radius: 50%;

background: none repeat scroll 0 0 #DDDDDD;

overflow: hidden;

box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset, 0 0 25px rgba(0, 0, 255, 0.075);

}

.ouro:after {

content: "";

position: absolute;

top: 9px;

left: 9px;

display: block;

height: 28px;

width: 28px;

background: none repeat scroll 0 0 #F2F2F2;

border-radius: 50%;

box-shadow: 0 0 10px rgba(0, 0, 0, .1);

}

.ouro>span {

position: absolute;

height: 100%;

width: 50%;

overflow: hidden;

}

.left {

left: 0

}

.right {

left: 50%

}

.anim {

position: absolute;

left: 100%;

top: 0;

height: 100%;

width: 100%;

border-radius: 999px;

background: none repeat scroll 0 0 #508EC3;

opacity: 0.8;

-webkit-animation: ui-spinner-rotate-left 3s infinite;

animation: ui-spinner-rotate-left 3s infinite;

-webkit-transform-origin: 0 50% 0;

transform-origin: 0 50% 0;

}

.left .anim {

border-bottom-left-radius: 0;

border-top-left-radius: 0;

}

.right .anim {

border-bottom-right-radius: 0;

border-top-right-radius: 0;

left: -100%;

-webkit-transform-origin: 100% 50% 0;

transform-origin: 100% 50% 0;

}

/* v2 */

.ouro2 .anim {

-webkit-animation-delay: 0;

animation-delay: 0;

}

.ouro2 .right .anim {

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

}

/* v3 */

.ouro3 .anim {

-webkit-animation-delay: 0s;

-webkit-animation-duration: 3s;

-webkit-animation-timing-function: linear;

animation-delay: 0s;

animation-duration: 3s;

animation-timing-function: linear;

}

.ouro3 .right .anim {

-webkit-animation-name: ui-spinner-rotate-right;

-webkit-animation-delay: 0;

-webkit-animation-delay: 1.5s;

animation-name: ui-spinner-rotate-right;

animation-delay: 0;

animation-delay: 1.5s;

}

/* round variation */

.round .ouro:after {

display: none

}

/* double variation */

.double .ouro:after {

height: 13px;

width: 13px;

left: 7px;

top: 7px;

border: 10px solid #ddd;

background: transparent;

box-shadow: none;

}

@keyframes ui-spinner-rotate-right {

0% {

transform: rotate(0deg)

}

25% {

transform: rotate(180deg)

}

50% {

transform: rotate(180deg)

}

75% {

transform: rotate(360deg)

}

100% {

transform: rotate(360deg)

}

}

@keyframes ui-spinner-rotate-left {

0% {

transform: rotate(0deg)

}

25% {

transform: rotate(0deg)

}

50% {

transform: rotate(180deg)

}

75% {

transform: rotate(180deg)

}

100% {

transform: rotate(360deg)

}

}

@-webkit-keyframes ui-spinner-rotate-right {

0% {

-webkit-transform: rotate(0deg)

}

25% {

-webkit-transform: rotate(180deg)

}

50% {

-webkit-transform: rotate(180deg)

}

75% {

-webkit-transform: rotate(360deg)

}

100% {

-webkit-transform: rotate(360deg)

}

}

@-webkit-keyframes ui-spinner-rotate-left {

0% {

-webkit-transform: rotate(0deg)

}

25% {

-webkit-transform: rotate(0deg)

}

50% {

-webkit-transform: rotate(180deg)

}

75% {

-webkit-transform: rotate(180deg)

}

100% {

-webkit-transform: rotate(360deg)

}

}

html {

height: 100%

}

body {

text-align: center;

background: radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat;

background: -webkit-radial-gradient(circle, #fff 0%, #bbb 85%) no-repeat;

height: 100%;

display: table;

width: 100%

}

.block {

display: table-cell;

vertical-align: middle

}

h1,

a {

margin-top: 1em;

font-family: "Open Sans Light", "Open Sans", "Segoe UI", Helvetica, Arial;

color: #888;

font-weight: lighter;

}

.info {

margin-top: 25px

}

.info a {

font-size: 12px;

color: #999

}

.info br+a {

text-decoration: none

}

以上就是今天码云笔记为大家带来的纯css实现的加载动画效果，希望大家喜欢，赶紧收藏一下，对你会有帮助的。