前端页面加载Loading动画

在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。

加载动画效果图

在这里插入图片描述

html

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
 
<body>
    <div class="loading">
        <div class="content">
            <div class="wave-1"></div>
            <div class="wave-1"></div>
            <div class="wave-1"></div>
            <div class="wave-1"></div>
            <div class="wave-1"></div>
        </div>
        <div class="content">
            <div class="wave-2"></div>
            <div class="wave-2"></div>
            <div class="wave-2"></div>
            <div class="wave-2"></div>
            <div class="wave-2"></div>
        </div>
        <div class="content">
            <div class="wave-3"></div>
            <div class="wave-3"></div>
            <div class="wave-3"></div>
            <div class="wave-3"></div>
            <div class="wave-3"></div>
        </div>
        <div class="content">
            <div class="circle-1"></div>
        </div>
        <div class="content">
            <div class="circle-2"></div>
        </div>
        <div class="content">
            <div class="circle-3"></div>
        </div>
        <div class="content">
            <div class="progress-1"></div>
        </div>
        <div class="content">
            <div class="point1">
                <div class="point1-item"></div>
                <div class="point1-item"></div>
                <div class="point1-item"></div>
                <div class="point1-item"></div>
                <div class="point1-item"></div>
                <div class="point1-item"></div>
                <div class="point1-item"></div>
            </div>
        </div>
        <div class="content">
            <div class="point2">
                <div class="point2-item"></div>
                <div class="point2-item"></div>
                <div class="point2-item"></div>
            </div>
        </div>
    </div>
</body>
 
</html>复制

css

 body {
    padding: 0px;
    margin: 0px;
 
}
 
.loading {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
    background: #272625;
}
 
.loading .content {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 150px;
    width: 150px;
    border: 1px solid #f6b352;
    margin: 15px;
    border-radius: 4px;
    padding: 10px;
}
 
.wave-1 {
    height: 100%;
    background: #f6b352;
    height: 70px;
    width: 20px;
    animation: wave 1.2s infinite ease-in-out;
}
 
.wave-1:nth-child(1) {
    animation-delay: -1.1s;
}
 
.wave-1:nth-child(2) {
    animation-delay: -1.0s;
}
 
.wave-1:nth-child(3) {
    animation-delay: -0.9s;
}
 
.wave-1:nth-child(4) {
    animation-delay: -0.8s;
}
 
.wave-1:nth-child(5) {
    animation-delay: -0.7s;
}
 
.wave-2 {
    height: 100%;
    background: #f6b352;
    height: 70px;
    width: 20px;
    animation: wave 1.2s infinite ease-in-out;
}
 
.wave-2:nth-child(1) {
    animation-delay: -0.7s;
}
 
.wave-2:nth-child(2) {
    animation-delay: -0.8s;
}
 
.wave-2:nth-child(3) {
    animation-delay: -0.9s;
}
 
.wave-2:nth-child(4) {
    animation-delay: -0.8s;
}
 
.wave-2:nth-child(5) {
    animation-delay: -0.7s;
}
 
.wave-3 {
    height: 100%;
    background: #f6b352;
    height: 70px;
    width: 20px;
    animation: wave 1.2s infinite ease-in-out;
}
 
.wave-3:nth-child(1) {
    animation-delay: -0.9s;
}
 
.wave-3:nth-child(2) {
    animation-delay: -0.8s;
}
 
.wave-3:nth-child(3) {
    animation-delay: -0.7s;
}
 
.wave-3:nth-child(4) {
    animation-delay: -0.8s;
}
 
.wave-3:nth-child(5) {
    animation-delay: -0.9s;
}
 
@keyframes wave {
 
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
    }
 
    20% {
        transform: scaleY(1);
    }
}
 
.circle-1 {
    height: 60px;
    width: 60px;
    border: 3px solid #ddd;
    border-bottom: 3px solid #f6b352;
    border-radius: 100%;
    animation: rotation 1s linear infinite;
 
}
 
.circle-2 {
    position: relative;
    height: 60px;
    width: 60px;
    border: 3px solid #ddd;
    border-radius: 100%;
    animation: rotation 1s linear infinite;
 
}
 
.circle-2::after {
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 3px solid transparent;
    border-bottom-color: #f6b352;
}
 
.circle-3 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #fff #fff transparent transparent;
    animation: rotation 1s linear infinite;
}
 
.circle-3::after,
.circle-3::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: 3px solid;
    animation: rotation-back 0.5s linear infinite;
}
 
.circle-3::after {
    border-color: transparent #f6b352 #f6b352 transparent;
    width: 52px;
    height: 52px;
}
 
.circle-3::before {
    border-color: transparent transparent #fff #fff;
    width: 44px;
    height: 44px;
}
 
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
 
    100% {
        transform: rotate(360deg);
    }
}
 
@keyframes rotation-back {
    0% {
        transform: rotate(0deg);
    }
 
    100% {
        transform: rotate(-360deg);
    }
}
 
 
.progress-1 {
    width: 100px;
    border-radius: 4px;
    height: 20px;
    background: linear-gradient(#f6b352 0 0) 0/0% no-repeat #ddd;
    animation: progress 2s infinite linear;
 
}
 
@keyframes progress {
    100% {
        background-size: 100%;
    }
}
 
.point1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
 
.point1-item {
    height: 10px;
    width: 10px;
    background: #f6b352;
    border-radius: 100%;
    animation: point1 1.2s infinite;
}
 
@keyframes point1 {
    0% {
        margin-top: 10px;
    }
 
    50% {
        margin-top: -30px;
    }
 
    100% {
        margin-top: 10px;
    }
}
 
.point1-item:nth-child(1) {
    animation-delay: -1s;
}
 
.point1-item:nth-child(2) {
    animation-delay: -0.9s;
}
 
.point1-item:nth-child(3) {
    animation-delay: -0.8s;
}
 
.point1-item:nth-child(4) {
    animation-delay: -0.7s;
}
 
.point1-item:nth-child(5) {
    animation-delay: -0.6s;
}
 
.point1-item:nth-child(6) {
    animation-delay: -0.5s;
}
 
.point1-item:nth-child(7) {
    animation-delay: -0.4s;
}
 
.point2 {
    display: flex;
    justify-content: space-around;
    width: 50%;
}
 
.point2-item {
    height: 15px;
    width: 15px;
    background: #f6b352;
    border-radius: 100%;
    animation: point2 1.2s infinite ease-in-out;
 
}
 
@keyframes point2 {
    0% {
        transform: scale(1.2);
    }
 
    50% {
        transform: scale(0.1);
    }
 
    100% {
        transform: scale(1.2);
    }
}
 
.point2-item:nth-child(1) {
    animation-delay: -1s;
}
 
.point2-item:nth-child(2) {
    animation-delay: -0.8s;
}
 
.point2-item:nth-child(3) {
    animation-delay: -0.6s;
}复制

前端页面加载Loading动画

加载动画效果图

html

css

jQuery实现3D轮播图

jQuery的toggle方法使用指南

解决jQuery跨域问题的方法

jQuery实现消息提示框

【jQuery从入门到精通】

echarts导出功能

Echarts 设置(title,axis,series含富文本,tooltip,visualMap...)

【Vue插件】Vue中封装Echarts插件

echarts地图,和地图点击事件地图加点击事件修改地图选中区颜色

echarts实用经验：tooltip悬浮框添加button按钮；toolbox添加自定义按钮；显示隐藏切换导致图表太小渲染不及时的解决办法

前端哥

印度电影《凶心人在宝莱坞》的主要内容

印度电影《未知死亡》的主要内容

未知死亡的详细内容

丝绸之路与洛阳的5个交汇处

JSON文件中的数据渲染到页面（jquery）

js/jquery之input 复选框checkbox、单选按钮radio选中判断

jQuery实现3D轮播图

jquery中ajax总结

jQuery的toggle方法使用指南

解决jQuery跨域问题的方法

1
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

2
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

3
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

4
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

5
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

6
Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993

7
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992

8
jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988

9
echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987

10
前端大屏适配几种方案

2024-01-29 13:01:44987

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>loading</title>
	<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
	<div class="loading">
	<div class="content">
	<div class="wave-1"></div>
	<div class="wave-1"></div>
	<div class="wave-1"></div>
	<div class="wave-1"></div>
	<div class="wave-1"></div>
	</div>
	<div class="content">
	<div class="wave-2"></div>
	<div class="wave-2"></div>
	<div class="wave-2"></div>
	<div class="wave-2"></div>
	<div class="wave-2"></div>
	</div>
	<div class="content">
	<div class="wave-3"></div>
	<div class="wave-3"></div>
	<div class="wave-3"></div>
	<div class="wave-3"></div>
	<div class="wave-3"></div>
	</div>
	<div class="content">
	<div class="circle-1"></div>
	</div>
	<div class="content">
	<div class="circle-2"></div>
	</div>
	<div class="content">
	<div class="circle-3"></div>
	</div>
	<div class="content">
	<div class="progress-1"></div>
	</div>
	<div class="content">
	<div class="point1">
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	<div class="point1-item"></div>
	</div>
	</div>
	<div class="content">
	<div class="point2">
	<div class="point2-item"></div>
	<div class="point2-item"></div>
	<div class="point2-item"></div>
	</div>
	</div>
	</div>
	</body>

	</html>

	body {
	padding: 0px;
	margin: 0px;

	}

	.loading {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 100vh;
	width: 100vw;
	background: #272625;
	}

	.loading .content {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 150px;
	width: 150px;
	border: 1px solid #f6b352;
	margin: 15px;
	border-radius: 4px;
	padding: 10px;
	}

	.wave-1 {
	height: 100%;
	background: #f6b352;
	height: 70px;
	width: 20px;
	animation: wave 1.2s infinite ease-in-out;
	}

	.wave-1:nth-child(1) {
	animation-delay: -1.1s;
	}

	.wave-1:nth-child(2) {
	animation-delay: -1.0s;
	}

	.wave-1:nth-child(3) {
	animation-delay: -0.9s;
	}

	.wave-1:nth-child(4) {
	animation-delay: -0.8s;
	}

	.wave-1:nth-child(5) {
	animation-delay: -0.7s;
	}

	.wave-2 {
	height: 100%;
	background: #f6b352;
	height: 70px;
	width: 20px;
	animation: wave 1.2s infinite ease-in-out;
	}

	.wave-2:nth-child(1) {
	animation-delay: -0.7s;
	}

	.wave-2:nth-child(2) {
	animation-delay: -0.8s;
	}

	.wave-2:nth-child(3) {
	animation-delay: -0.9s;
	}

	.wave-2:nth-child(4) {
	animation-delay: -0.8s;
	}

	.wave-2:nth-child(5) {
	animation-delay: -0.7s;
	}

	.wave-3 {
	height: 100%;
	background: #f6b352;
	height: 70px;
	width: 20px;
	animation: wave 1.2s infinite ease-in-out;
	}

	.wave-3:nth-child(1) {
	animation-delay: -0.9s;
	}

	.wave-3:nth-child(2) {
	animation-delay: -0.8s;
	}

	.wave-3:nth-child(3) {
	animation-delay: -0.7s;
	}

	.wave-3:nth-child(4) {
	animation-delay: -0.8s;
	}

	.wave-3:nth-child(5) {
	animation-delay: -0.9s;
	}

	@keyframes wave {

	0%,
	40%,
	100% {
	transform: scaleY(0.4);
	}

	20% {
	transform: scaleY(1);
	}
	}

	.circle-1 {
	height: 60px;
	width: 60px;
	border: 3px solid #ddd;
	border-bottom: 3px solid #f6b352;
	border-radius: 100%;
	animation: rotation 1s linear infinite;

	}

	.circle-2 {
	position: relative;
	height: 60px;
	width: 60px;
	border: 3px solid #ddd;
	border-radius: 100%;
	animation: rotation 1s linear infinite;

	}

	.circle-2::after {
	position: absolute;
	content: "";
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 100%;
	border: 3px solid transparent;
	border-bottom-color: #f6b352;
	}

	.circle-3 {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	border: 3px solid;
	border-color: #fff #fff transparent transparent;
	animation: rotation 1s linear infinite;
	}

	.circle-3::after,
	.circle-3::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	border: 3px solid;
	animation: rotation-back 0.5s linear infinite;
	}

	.circle-3::after {
	border-color: transparent #f6b352 #f6b352 transparent;
	width: 52px;
	height: 52px;
	}

	.circle-3::before {
	border-color: transparent transparent #fff #fff;
	width: 44px;
	height: 44px;
	}

	@keyframes rotation {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}

	@keyframes rotation-back {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(-360deg);
	}
	}


	.progress-1 {
	width: 100px;
	border-radius: 4px;
	height: 20px;
	background: linear-gradient(#f6b352 0 0) 0/0% no-repeat #ddd;
	animation: progress 2s infinite linear;

	}

	@keyframes progress {
	100% {
	background-size: 100%;
	}
	}

	.point1 {
	display: flex;
	justify-content: space-around;
	width: 100%;
	}

	.point1-item {
	height: 10px;
	width: 10px;
	background: #f6b352;
	border-radius: 100%;
	animation: point1 1.2s infinite;
	}

	@keyframes point1 {
	0% {
	margin-top: 10px;
	}

	50% {
	margin-top: -30px;
	}

	100% {
	margin-top: 10px;
	}
	}

	.point1-item:nth-child(1) {
	animation-delay: -1s;
	}

	.point1-item:nth-child(2) {
	animation-delay: -0.9s;
	}

	.point1-item:nth-child(3) {
	animation-delay: -0.8s;
	}

	.point1-item:nth-child(4) {
	animation-delay: -0.7s;
	}

	.point1-item:nth-child(5) {
	animation-delay: -0.6s;
	}

	.point1-item:nth-child(6) {
	animation-delay: -0.5s;
	}

	.point1-item:nth-child(7) {
	animation-delay: -0.4s;
	}

	.point2 {
	display: flex;
	justify-content: space-around;
	width: 50%;
	}

	.point2-item {
	height: 15px;
	width: 15px;
	background: #f6b352;
	border-radius: 100%;
	animation: point2 1.2s infinite ease-in-out;

	}

	@keyframes point2 {
	0% {
	transform: scale(1.2);
	}

	50% {
	transform: scale(0.1);
	}

	100% {
	transform: scale(1.2);
	}
	}

	.point2-item:nth-child(1) {
	animation-delay: -1s;
	}

	.point2-item:nth-child(2) {
	animation-delay: -0.8s;
	}

	.point2-item:nth-child(3) {
	animation-delay: -0.6s;
	}

前端页面加载Loading动画

加载动画效果图

html

css

微信扫一扫：分享