loading animation

发布于 2020-02-14  141 次阅读

展示地址：http://show.cqdefxxx.com/loading%20animation/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Loading</title>
        <link rel="stylesheet" href="style.css">
	</head>
	<body>
    <div class="loading">
        <span>Loading...</span>        
    </div>
	</body>
</html>

style.css

body{
    margin:0;
    padding:0;
    background: #34495e;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "montserrat",sans-serif;
}

.loading{
    width:200px;
    height:200px;
    box-sizing: border-box;
    border-radius: 50%;
    border-top:10px solid #9b4400;   
    position: relative;
    animation:loading 2s linear infinite;
}

.loading:before,.loading:after{
    content: "";
    width:200px;
    height:200px;
    position: absolute;
    left: 0;
    top: -10px;
    box-sizing: border-box;
    border-radius: 50%;    
}

.loading:before{
    border-top: 10px solid #ff8c31;
    transform:rotate(120deg);
}

.loading:after{
    border-top: 10px solid #70f3ff;
    transform:rotate(240deg);
}

.loading span{
    position: absolute;
    width:200px;
    height:200px;
    color:#fff;
    text-align: center;
    line-height: 200px;
    animation:loadingspan 2s linear infinite;
}

@keyframes loading{
    to{
        transform: rotate(360deg);
    }
}
@keyframes loadingspan{
    to{
        transform: rotate(-360deg);
    }
}

 

注错之当