用CSS3 实现loading动画

最新推荐文章于 2025-07-04 12:10:51 发布

原创最新推荐文章于 2025-07-04 12:10:51 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 loading动画

CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用CSS3的transform、transition和animation属性来制作loading动画，具体展示了转圈式的circle动画效果，并列举了一些常用的loading动画在线生成网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3中常用transform，transition，animation三个属性制作动画，而loading动画算是页面最常见的动画之一，下面就用之前提到的几个属性做两个简单的loading动画

1.转圈式的（circle）

css代码：

<pre name="code" class="css">.loading-circle{
	width:50px;
	height:50px;
	border:5px solid;
	border-color:#333 #333 transparent;
	border-radius:50%;
	animation:loading-circle 1s linear both infinite;
}


@keyframes loading-circle{
			0%{transform:rotate(0);}
			100%{transform:rotate(360deg);}
		}

html:

<div class="loading-circle"></div>

2.步进式的：

CSS：

.loading-step{
			width:95px;
			height:40px;
			font-size:0;
			overflow:hidden;
			white-space:nowrap;
			margin-top:20px;
			vertical-align:middle;
			
		}
		.loading-step i{
			display:inline-block;
			width:10px;
			height:10px;
			background-color:#999;
			border-radius:50%;
			margin-right:10px;
		}
		.loading-step .bar{
			line-height:40px;
			animation:loading-step 1.5s steps(5,end) both infinite;
		}
		.loading-step i:nth-child(6){
			transform:scale(1.5);
			background-color:#333;
		}
		@keyframes loading-step{
			0%{transform:translate(-100px);};
			80%,100%{transform:translate(0);}
		}

html:

<div class="loading-step">
		<div class="bar">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</div>

一些常用的loading动画网站：

1.preloaders.net

2.http://www.ajaxload.info/

3.http://www.loadinfo.net/

4.http://cssload.net/

以上为个人学习记录