I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code:
.spinner {
width: 100px;
height: 100px;
position:absolute;
top: 50%;
left: 50%;
margin: 100px auto;
z-index:99999;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
z-index:99999;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
z-index:99999;
}
The spinner div is currently in my application.html.erb file within the body tag above the yield statement. How can I ensure that it is perfectly centered on the webpage, taking into account any sidebars or navigation bars?