react实现自定义loading

结合任意ui组件库,利用css3的动画,轻松实现自定义loading

const Loading = (props) => {
	const { type, size, icon, color } = props;
	return (
		<div className="box">
			<span className="icon" style={{ color }}>
				{!icon ? <CustomIcon type={type} size={size} /> : icon}
			</span>
		</div>
	)
}

.box{
	position:relative;
	width:50px;
	height:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	
	.icon{
		animation:loading 1s linear infinite;
	}
}

@keyframe loading{
	form{
		transform:rotate(0deg);
	}

	to{
		transform:rotate(360deg);	
	}
}