antDesign 自定义一个loading组件

最新推荐文章于 2023-12-28 22:58:35 发布

IT吃糖

最新推荐文章于 2023-12-28 22:58:35 发布

阅读量1.4k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/csdn_____c/article/details/123329190

版权

效果图如下

在这里插入图片描述
由于是录制的gif，所以有不流畅的效果，真实情况下是不会出现这种效果的。
Html代码：

<body>
		<div id="loading">
			<div id="circle">
				<div class="circle-item1"></div>
				<div class="circle-item2"></div>
				<div class="circle-item3"></div>
				<div class="circle-item4"></div>
			</div>
		</div>
	</body>

css代码

html,
			body {
				width: 100%;
				height: 100%;
			}

			* {
				margin: 0;
				padding: 0;
			}
			//通过css3的动画功能实现
			@-ms-keyframes loading {
				0% {
					transform: rotate(0deg);
				}
				
				20% {
					transform: rotate(72deg);
				}
				
				40% {
					transform: rotate(144deg);
				}
				
				60% {
					transform: rotate(216deg);
				}
				
				80% {
					transform: rotate(288deg);
				}
				
				100% {
					transform: rotate(360deg);
				}
			}

			@-webkit-keyframes loading {
				0% {
					transform: rotate(0deg);
				}
				
				20% {
					transform: rotate(72deg);
				}
				
				40% {
					transform: rotate(144deg);
				}
				
				60% {
					transform: rotate(216deg);
				}
				
				80% {
					transform: rotate(288deg);
				}
				
				100% {
					transform: rotate(360deg);
				}
			}

			@-moz-keyframes loading {
				0% {
					transform: rotate(0deg);
				}
				
				20% {
					transform: rotate(72deg);
				}
				
				40% {
					transform: rotate(144deg);
				}
				
				60% {
					transform: rotate(216deg);
				}
				
				80% {
					transform: rotate(288deg);
				}
				
				100% {
					transform: rotate(360deg);
				}
			}

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

				20% {
					transform: rotate(72deg);
				}

				40% {
					transform: rotate(144deg);
				}

				60% {
					transform: rotate(216deg);
				}

				80% {
					transform: rotate(288deg);
				}

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

			#loading {
				position: relative;
				width: 100%;
				height: 100%;
			}

			#circle {
				position: absolute;
				display: flex;
				flex: 1;
				justify-content: space-between;
				align-content: space-between;
				flex-wrap: wrap;
				width: 22px;
				height: 22px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transform-origin: 50% 50%;
				animation: loading 1s linear infinite;//转一圈的时间是1s,一直转

			}

			[class^="circle-"] {
				width: 8px;
				height: 8px;
				border-radius: 50%;
			}

			.circle-item1 {
				background-color: rgba(73, 94, 145);
			}

			.circle-item2 {
				background-color: rgba(134, 149, 182);
			}

			.circle-item3 {
				background-color: rgba(189, 197, 215);
			}

			.circle-item4 {
				background-color: rgba(189, 197, 215);
			}

函数组件 .js/.ts文件

import './loading.less';//引入css样式，就是你存在css的路径

export default function Loading() {
  return (
    <div id="loading">
      <div id="circle">
        <div className="circle-item1"></div>
        <div className="circle-item2"></div>
        <div className="circle-item3"></div>
        <div className="circle-item4"></div>
      </div>
    </div>
  );
}