CodePen Home Animated Loading Spinner
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>
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;
}
.spinner-sector-blue {
animation: rotate 2s ease-out infinite;
border-top: 15px solid lightblue;
}
.spinner-sector-red {
animation: rotate 2.5s ease-in infinite;
border-top: 15px solid lightcoral;
}
.spinner-sector-green {
animation: rotate 1.5s ease-in-out infinite;
border-top: 15px solid lightgreen;
}
@keyframes rotate {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
@keyframes loading-opacity {
0%, 100% {
opacity: 1;
}
25%, 75% {
opacity: .5;
}
50% {
opacity: .1;
}
}
