@import url(http://fonts.googleapis.com/css?family=Play:400,700);
* {
box-sizing: border-box;
}
body {
background-color: #222;
font-family: "Play";
}
h1 {
font-size: 2rem;
color: #FFF;
text-align: center;
text-transform: uppercase;
}
.smart-glass {
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 288px;
height: 388px;
}
.logo {
width: 288px;
height: 288px;
position: relative;
}
.circle {
padding: 20px;
border: 6px solid transparent;
border-top-color: #40A800;
border-radius: 50%;
width: 100%;
height: 100%;
animation: connect 2.5s linear infinite;
}
.xbox {
background: #FFF;
width: 80px;
height: 80px;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
.xbox:after, .xbox:before {
content: "";
display: block;
border-top: 10px solid #222;
border-radius: 50%;
height: 90%;
width: 120%;
transform: rotate(-45deg);
position: absolute;
right: -30%;
top: 15%;
}
.xbox:before {
left: -30%;
transform: rotate(45deg);
}
.loading-text {
text-transform: uppercase;
color: #FFF;
text-align: center;
margin: 10px 0;
font-size: 1.4rem;
}
@keyframes connect {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}<div class="smart-glass">
<h1>Xbox</h1>
<div class="logo">
<div class="circle">
<div class="circle">
<div class="circle">
</div>
</div>
</div>
<div class="hold-x">
<div class="xbox"></div>
</div>
</div>
<div class="loading-text">
Loading...
</div>
</div>I came across this stylish loading animation on a website and I'm thinking of incorporating it into my project. However, my concern is how to pause or stop the animation once the page finishes loading. Any suggestions or guidance on this matter would be greatly appreciated.