web前端入门到实战：纯CSS实现加载转圈样式

发布时间：2020-05-27 18:11:33

来源：51CTO

阅读：134

作者：前端向南

不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的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;