CSS实现loading加载动画

这里写自定义目录标题

- 一、效果
- 二、思路：
- 三、代码实现

一、效果

在这里插入图片描述

二、思路：

1、动画效果从0%到100%，loading的每条线从灰色变成跟背景色一样颜色（例子中是白色），就实现线条的显示和隐藏；

2、所有线共同属性设置动画 循环播放:
animation: f_fadeG 0.932s infinite;

3、每条线设置不同的动画延迟时间animation-delay，让它们陆续从灰色变成背景色（视觉上就实现效果了）

三、代码实现

 <style>
.incorrect-icon {
    position: relative;
    width: 44px;
    height: 42px;
    transform: scale(0.8);
}
.f_circleG {
    position: absolute;
    width: 3px;
    height: 9px;
    /* border-radius:9px 9px 0 0; */
    animation: f_fadeG 0.932s infinite;
}
#frotateG_01 {
    left: 3px;
    top: 21px;
    animation-delay: 0.3495s;
    transform:rotate(-90deg)
}
#frotateG_02 {
    left: 7px;
    top: 13px;
    animation-delay: 0.466s;
    transform:rotate(-45deg);
}
#frotateG_03 {
    left: 16px;
    top: 10px;
    animation-delay: 0.5825s;
    transform:rotate(0deg);
}
#frotateG_04 {
    right: 16px;
    top: 13px;
    animation-delay: 0.699s;
    transform:rotate(45deg);
}
#frotateG_05 {
    right: 12px;
    top: 22px;
    animation-delay: 0.8155s;
    transform:rotate(90deg);
}
#frotateG_06 {
    right: 17px;
    bottom: 3px;
    animation-delay: 0.932s;
    transform:rotate(135deg);
}
#frotateG_07 {
    left: 16px;
    bottom: 0px;
    animation-delay: 1.0485s;
    transform:rotate(180deg);
}
#frotateG_08 {
    left: 7px;
    bottom: 3px;
    animation-delay: 1.165s;
    transform:rotate(-135deg);
}
@keyframes f_fadeG {
    // loading的每条线从灰色变成跟背景色一样颜色（例子中是白色），就实现线条的显示和隐藏
    0% {
        background-color: rgb(207, 205, 205);
    }
    100%{
        background-color: rgb(255,255,255)
    }
}
</style>
 
<body>
        <div class="fixed-popup" v-if="ftpFileDialog.isVisible">
            <div class="incorrect-icon">
                <div class="f_circleG" id="frotateG_01"></div>
                <div class="f_circleG" id="frotateG_02"></div>
                <div class="f_circleG" id="frotateG_03"></div>
                <div class="f_circleG" id="frotateG_04"></div>
                <div class="f_circleG" id="frotateG_05"></div>
                <div class="f_circleG" id="frotateG_06"></div>
                <div class="f_circleG" id="frotateG_07"></div>
                <div class="f_circleG" id="frotateG_08"></div>
            </div>
            <span>{{数据传输中}}</span>
        </div>
</body>
 复制

标签

CSS实现loading加载动画

这里写自定义目录标题

一、效果

二、思路：

三、代码实现

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

CSS Grid 布局在 IE 中不兼容的原因与解决方案

快速入门CSS

html css基础教程入门篇之CSS 浮动行框和清理

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<style>
	.incorrect-icon {
	position: relative;
	width: 44px;
	height: 42px;
	transform: scale(0.8);
	}
	.f_circleG {
	position: absolute;
	width: 3px;
	height: 9px;
	/* border-radius:9px 9px 0 0; */
	animation: f_fadeG 0.932s infinite;
	}
	#frotateG_01 {
	left: 3px;
	top: 21px;
	animation-delay: 0.3495s;
	transform:rotate(-90deg)
	}
	#frotateG_02 {
	left: 7px;
	top: 13px;
	animation-delay: 0.466s;
	transform:rotate(-45deg);
	}
	#frotateG_03 {
	left: 16px;
	top: 10px;
	animation-delay: 0.5825s;
	transform:rotate(0deg);
	}
	#frotateG_04 {
	right: 16px;
	top: 13px;
	animation-delay: 0.699s;
	transform:rotate(45deg);
	}
	#frotateG_05 {
	right: 12px;
	top: 22px;
	animation-delay: 0.8155s;
	transform:rotate(90deg);
	}
	#frotateG_06 {
	right: 17px;
	bottom: 3px;
	animation-delay: 0.932s;
	transform:rotate(135deg);
	}
	#frotateG_07 {
	left: 16px;
	bottom: 0px;
	animation-delay: 1.0485s;
	transform:rotate(180deg);
	}
	#frotateG_08 {
	left: 7px;
	bottom: 3px;
	animation-delay: 1.165s;
	transform:rotate(-135deg);
	}
	@keyframes f_fadeG {
	// loading的每条线从灰色变成跟背景色一样颜色（例子中是白色），就实现线条的显示和隐藏
	0% {
	background-color: rgb(207, 205, 205);
	}
	100%{
	background-color: rgb(255,255,255)
	}
	}
	</style>

	<body>
	<div class="fixed-popup" v-if="ftpFileDialog.isVisible">
	<div class="incorrect-icon">
	<div class="f_circleG" id="frotateG_01"></div>
	<div class="f_circleG" id="frotateG_02"></div>
	<div class="f_circleG" id="frotateG_03"></div>
	<div class="f_circleG" id="frotateG_04"></div>
	<div class="f_circleG" id="frotateG_05"></div>
	<div class="f_circleG" id="frotateG_06"></div>
	<div class="f_circleG" id="frotateG_07"></div>
	<div class="f_circleG" id="frotateG_08"></div>
	</div>
	<span>{{数据传输中}}</span>
	</div>
	</body>

CSS实现loading加载动画

这里写自定义目录标题

一、效果

二、思路：

三、代码实现

微信扫一扫：分享