简单的CSS旋转加载动画

来源:https://www.sucaihuo.com/js/2414.html 2017-07-14 22:08浏览(1141) 收藏

一款常用的简单的CSS旋转加载动画,主要运用了不同的色块边框和无限自旋转,可以用在任何加载进度的场景了,喜欢的童鞋请收下吧。
简单的CSS旋转加载动画
分类:css3 > 进度条 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,设置好页面元素和加载动画即可,代码如下:

.loader {
	-webkit-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite;
	border: 5px solid #ddd;
	border-top: 5px solid #42a5f5;
	border-radius: 50%;
	height: 75px;
	width: 75px;
}
@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}
html, body {
	height: 100%;
	margin: 0;
}
body {
	background-color: #414141;
	-webkit-box-align: center;
	   -ms-flex-align: center;
	      align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.container {
	margin: 0 auto;
}

页面的body部分,结构相当的简单,div容器里嵌套一个div来放置圆形进度条即可,代码如下:

<div class="container">
	<div class="loader"></div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2