HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 超简单的纯CSS3加载中效果

超简单的纯CSS3加载中效果


CSS3实现的加载中效果非常简单,我们在AJAX请求或者后台处理的UI中常常使用。


这里有一个简单的实现方式,代码如下:


/**

 * (C)Leanest CSS spinner ever

 */


@keyframes spin {

to { transform: rotate(1turn); }

}


.progress {

position: relative;

display: inline-block;

width: 5em;

height: 5em;

margin: 0 .5em;

font-size: 12px;

text-indent: 999em;

overflow: hidden;

animation: spin 1s infinite steps(8);

}


.small.progress {

font-size: 6px;

}


.large.progress {

font-size: 24px;

}


.progress:before,

.progress:after,

.progress > div:before,

.progress > div:after {

content: '';

position: absolute;

top: 0;

left: 2.25em; /* (container width - part width)/2  */

width: .5em;

height: 1.5em;

border-radius: .2em;

background: #eee;

box-shadow: 0 3.5em #eee; /* container height - part height */

transform-origin: 50% 2.5em; /* container height / 2 */

}


.progress:before {

background: #555;

}


.progress:after {

transform: rotate(-45deg);

background: #777;

}


.progress > div:before {

transform: rotate(-90deg);

background: #999;

}


.progress > div:after {

transform: rotate(-135deg);

background: #bbb;

}



【超简单的纯CSS3加载中效果】相关文章

1. 超简单的纯CSS3加载中效果

2. JQuery实现的 超简单的菜单缩放效果

3. 一款非常棒的纯CSS3 3D菜单演示及制作教程

4. CSS3实现简单的动画图片说明效果

5. 一个简单的CSS3文字动画插件textillate

6. ADOBE CS5.5 最简单的破解版

7. 用纯CSS3实现图片幻灯片切换效果

8. 效果非常酷!纯CSS3实现的图片滑块程序

9. 纯css3 transforms 3D文字翻开翻转3D开放式效果

10. 通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用

本文来源:https://www.51html5.com/a3486.html

点击展开全部

﹝超简单的纯CSS3加载中效果﹞相关内容

其它栏目

也许您还喜欢