<!DOCTYPE html>
<html>
<head>
<title>Spinner</title>
</head>
<body>
<div class="spinner"></div>
<h3 class="text">LOADING...</h3>
<style>
html {
background-color: #000000;
}
.text {
color: #fff;
font-family: Arial;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -150%);
text-transform:uppercase;
letter-spacing:2px;
margin-top:20px;
color: #3fefef; filter:drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
animation: animate_text 1.0s steps(1) infinite;
}
.spinner {
position: relative;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
}
.spinner::before,
.spinner:after{
content: "";
position: absolute;
border-radius: inherit;
}
.spinner:before {
width: 100%;
height: 100%;
background-image:linear-gradient(
0deg, #ff00cc 0%,
#333399 100% );
animation: spin .5s infinite linear;
}
.spinner:after {
width: 85%;
height: 85%;
background-color: #000000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes animate_text {
0%, 100% {
opacity:0;
}
50% {
opacity:1;
}
}
</style>
</body>
</html>