<div class="loading_container">
<div class="loading">
</div>
<h3>loading...</h3>
</div>
:root {
--animation-speed: 2s;
--primary-color: #fff;
--secondary-color: #000;
--background-color: #212121;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--background-color);
font-family: var(--font);
}
.loading_container {
width: 200px;
height: 200px;
position: relative;
/* background: greenyellow; */
border-radius: 150px;
}
.loading {
width: 100%;
height: 100%;
border-radius: 150px;
border-right: 0.3rem solid white;
animation: animate var(--animation-speed) linear infinite;
}
.loading_container h3 {
color: var(--text-color);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* Animation */
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.