Complete source code of Animated Loading Spinner in html
background_styles.css
@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #DFDFDF;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="background_styles.css">
<link rel="stylesheet" href="styles.css">
<title>Animated Loading Spinner</title>
</head>
<body>
<div class="spinner">
<div class="spinner-text">Loading</div>
<div class="spinner-sector spinner-sector-red"></div>
<div class="spinner-sector spinner-sector-blue"></div>
<div class="spinner-sector spinner-sector-green"></div>
</div>
</body>
</html>
styles.css
* {
box-sizing: border-box;
}
.spinner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}
.spinner-sector {
border-radius: 50%;
position: absolute;
width: 100%;
height: 100%;
border: 15px solid transparent;
mix-blend-mode: overlay;
}
.spinner-text {
animation: loading-opacity 3s ease-in-out infinite;
font-size: 2em;
}