html页面加载转圈,纯CSS实现加载转圈样式

不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。

Document

.load-container {

background-color: #F1F1EA;

width: auto;

height: 700px;

position: relative;

overflow: hidden;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.loader {

font-size: 10px;

margin: 100px auto;

margin-top: 300px;

width: 1em;

height: 1em;

border-radius: 50%;

text-indent: -9999em;

position: relative;

animation: mymove 1.3s infinite linear;

-webkit-animation: mymove 1.5s infinite linear;

-webkit-transform: translateZ(0);

-ms-transform: translateZ(0);

transform: translateZ(0);

}

@keyframes mymove {

0%,

100% {