自定义加载中样式

最新推荐文章于 2024-07-24 10:22:02 发布

bluelotos893

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量444

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/bluelotos893/article/details/89031075

版权

CSS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

先看一下静态的效果图：
在这里插入图片描述
通过动画改变元素的旋转及border样式，即可简单实现自定义的加载效果。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style type="text/css">
		.loading-box {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100px;
			height: 100px;
			background: #46c6d6;
			border-radius: 4px;
			z-index: 2;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			flex-direction: column;
		}

		.loading-box .loading-icon {
			-webkit-animation: mugine_class_833 1s infinite linear;
			border-radius: 100%;
			border: 2px solid #fff;
			border-top-color: rgba(255, 70, 0, 0.6);
			border-left-color: rgba(255, 70, 0, 0.6);
			width: 20px;
			height: 20px;
			margin: 26px 0 13px 0;
		}

		.loading-box .loading-text {
			bottom: 8px;
			width: 100%;
			text-align: center;
			font-size: 13px;
		}

		@keyframes mugine_class_833 {
			0% {
				transform: rotate(0deg);
				border-top-color: rgba(255, 70, 0, 0.5);
				border-left-color: rgba(255, 70, 0, 0.5);
			}
			100% {
				transform: rotate(360deg);
				border-top-color: rgba(255, 70, 0, 0.9);
				border-left-color: rgba(255, 70, 0, 0.9);
			}
		}
	</style>
	<title>测试..</title>
</head>

<body>
	<div class="loading-box">
		<div class="loading-icon"></div>
		<div class="loading-text">加载中...</div>
	</div>
</body>

</html>