6种CSS3炫酷预加载Loading

最新推荐文章于 2025-07-04 12:10:51 发布
转载 最新推荐文章于 2025-07-04 12:10:51 发布 · 5.4k 阅读 · 17

插件描述：6种CSS3炫酷预加载Loading，非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

实现方法

这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。

使用方法

 音频波形Loading动画

HTML结构

使用5个空的<span>元素，每一个代表一条波形柱子。

1
2
3
4
5
6
7
<div id="preloader_1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#preloader_1{
    position:relative;
}
#preloader_1 span{
    display:block;
    bottom:0px;
    width: 9px;
    height: 5px;
    background:#9b59b6;
    position:absolute;
    animation: preloader_1 1.5s  infinite ease-in-out;
}  
#preloader_1 span:nth-child(2){
    left:11px;
    animation-delay: .2s;  
}
#preloader_1 span:nth-child(3){
    left:22px;
    animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
    left:33px;
    animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
    left:44px;
    animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。

 圆形变矩形Loading动画

HTML结构

圆形变矩形Loading动画使用4个空的<span>元素，每一个代表一个圆形/矩形。

1
2
3
4
5
6
<div id="preloader_2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

该loading指示器动画通过修改border-radius属性来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
#preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }
#preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }
#preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }
 @-keyframes preloader_2_1 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius:20px;
background:#3498db;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_2 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius:20px;
background:#f1c40f;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_3 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius:20px;
background:#2ecc71;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
 @-keyframes preloader_2_4 {
 0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
 50% {
-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius:20px;
background:#e74c3c;
}
 80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
 100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}
 交叉图形变换Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

1
<div id="preloader_3"></div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#preloader_3{
    position:relative;
}
#preloader_3:before{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#9b59b6;
    animation: preloader_3_before 1.5s infinite ease-in-out;
}
   
#preloader_3:after{
    width:20px;
    height:20px;
    border-radius:20px;
    background:blue;
    content:'';
    position:absolute;
    background:#2ecc71;
    left:22px;
    animation: preloader_3_after 1.5s infinite ease-in-out;
} 
@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
    100% {transform: translateX(0px)}
}
 蛇形Loading动画

HTML结构

该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。

1
2
3
4
5
6
7
<div id="preloader_4">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#preloader_4{
    position:relative;
}
#preloader_4 span{
    position:absolute;
    width:20px;
    height:20px;
    background:#3498db;
    opacity:0.5;
border-radius:20px;
    -animation: preloader_4 1s infinite ease-in-out;
   
}
#preloader_4 span:nth-child(2){
    left:20px;
    animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
    left:40px;
    animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
    left:60px;
    animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
    left:80px;
    animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {
      opacity: 0.3; 
      transform:translateY(0px);    
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {
      opacity: 1; 
      transform: translateY(-10px); 
      background:#f1c40f;  
      box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {
      opacity: 0.3; 
      transform:translateY(0px); 
      box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
 旋转轮盘Loading动画

HTML结构

该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。

1
<div id="preloader_5"></div>

CSS样式

两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#preloader5{
    position:relative;
    width:30px;
    height:30px;
    background:#3498db;
    border-radius:50px;
    animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:10px solid #9b59b6;
    border-bottom:10px solid #9b59b6;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-radius:50px;
    content:'';
    top:-20px;
    left:-20px;
    animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
 windows标志Loading动画

HTML结构

每一个span代表一个方块。

1
2
3
4
5
6
<div id="preloader_6">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS样式

所有的方块以网格进行布局。动画添加在主div元素上，使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#preloader_6{
    position:relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
}
#preloader_6 span{
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: preloader_6_span 1s infinite linear;
}
#preloader_6 span:nth-child(1){
  background:#2ecc71;
}
#preloader_6 span:nth-child(2){
  left:22px;
  background:#9b59b6;
  animation-delay: .2s;
}
#preloader_6 span:nth-child(3){
  top:22px;
  background:#3498db;
  animation-delay: .4s;
}
#preloader_6 span:nth-child(4){
  top:22px;
  left:22px;
  background:#f1c40f;
  animation-delay: .6s;
}
@keyframes preloader_6 {
    from {-ms-transform: rotate(0deg);}
    to {-ms-transform: rotate(360deg);}
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}
纯 CSS 实现十个还不错的 Loading 效果
那片枫叶~
04-14 805
为保证运行正常，咱先规定下： * { box-sizing: border-box; } 1. 平滑加载 <div class="progress-1"></div> .progress-1 { width:120px; height:20px; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p1 2s infinite linear; } @keyfram
6种CSS3炫酷预加载Loading指示器动画特效
12-13
本文将详细探讨标题为"6种CSS3炫酷预加载Loading指示器动画特效"的知识点，以及如何利用这些特效来优化网站的用户体验。 首先，我们了解什么是预加载指示器。当用户打开一个网页时，如果内容需要时间加载，预加载...
css3超炫8种loading加载特效
weixin_30822451的博客
04-30 587
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
用css实现loading动画效果
最新发布
Blairzzzhu的博客
07-04 363
本文介绍了5种纯CSS实现的Loading动画效果：1)旋转圆圈效果，通过border和旋转动画实现；2)点状弹跳效果，利用三个圆点的延迟动画；3)进度条效果，使用平移动画模拟加载进度；4)脉冲效果，通过缩放和透明度变化；5)SVG圆圈效果，结合stroke-dasharray实现高级动画。所有方案均提供HTML和CSS代码示例，无需JavaScript，性能优异且易于定制。建议根据项目需求选择合适样式，可调整颜色、大小和动画参数，也可使用CSS变量实现主题切换。这些轻量级解决方案适合各种网页加载场景。
酷炫的loading
weixin_30248399的博客
07-27 104
今天分享一下，怎么通过用css写出一个酷炫的loading。 meta: <meta name="viewport" content="width=device-width, initial-scale=1.0"> html: <div class="fontSty" id="fontSty0" onclick="clickFunc(1)">你好...
CSS3实现10种Loading效果
dgqvhtlwq472235338的博客
06-19 407
原文：http://www.open-open.com/code/view/1436164419895 昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记…… 第1种效果： 代码如下： <div class="loading"> <span></span> ...
纯CSS3实现各种loading效果
热门推荐
qq_39025670的博客
07-26 1万+
通过CSS3实现一些炫酷的loading动画效果...
30种CSS3炫酷页面预加载loading动画特效源码.zip
10-31
本资源"30种CSS3炫酷页面预加载loading动画特效源码.zip"包含了30个不同的CSS3实现的加载动画效果，这些效果既美观又高效，能够为你的网站增添独特的魅力。 首先，CSS3是 Cascading Style Sheets 的第三版，它是...
4种炫酷CSS3 loading预加载动画特效
12-13
总的来说，"4种炫酷CSS3 loading预加载动画特效"展示了CSS3在创建动态用户体验方面的强大能力。通过熟练掌握关键帧动画，开发者可以设计出各种吸引人的加载效果，提升用户在等待页面加载时的体验。
css3炫酷3D立方体预加载loading特效
12-13
在本文中，我们将深入探讨如何使用CSS3创建一个炫酷的3D立方体预加载loading特效，这是一个在网页加载过程中吸引用户注意力的实用设计。这个特效利用了CSS3的先进特性，包括3D变换、过渡和动画，为用户提供了一种...
CSS3实现炫酷loading预加载动画特效 4种.zip
11-02
本资源"CSS3实现炫酷loading预加载动画特效 4种.zip"包含了四种不同的CSS3实现的预加载动画效果，旨在帮助开发者或设计师提升网站的用户体验。 首先，我们来详细了解CSS3的一些关键特性，这些特性为创建动画提供了...
纯CSS3实现8款超好看的Loading加载动画特效
02-19
纯CSS3实现8款Loading加载动画特效，可以比拟gif动画效果的8个创新绿色Loading加载特效，动画效果非常漂亮。 这是一款非常不错的导航菜单，鼠标悬停导航上面文章内容遮罩变暗，鼠标离开文章高亮显示。
H5非常炫酷的加载特效loading
12-08
H5非常炫酷的加载特效loading,简单实用
炫酷loading Css
06-07
关于css 加载框 各种炫酷loading框。纯css实现。 摘抄
css3 中实现炫酷的loading效果
12-30
•今天实现了一个炫酷的loading效果，基本全用css来实现，主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html： <div clas
非常好看的CSS加载中特效，引用css文件既可用
一个专注于技术研究创新的程序员
02-04 1520
非常好看的CSS加载中特效 demo效果源码：
loading - css
如果我年少有为不自卑
08-30 437
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;style&gt; .loader { bor
炫酷的loading框
weixin_33998125的博客
03-22 267
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3炫酷loading预加载效果详解
资源摘要信息: "CSS3实现两款炫酷的loading预加载样式.zip" 在互联网应用中，loading预加载样式是用户体验的重要组成部分，它能够告知用户当前正在加载内容，减少用户等待时的焦虑感。随着Web前端技术的不断进步，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值