Currently, I have a single HTML div dedicated to serving as a loading screen element. My goal is to incorporate a full-page background color behind the rotating image. Essentially, I want the animated image to be displayed on top of a solid colored background that covers the entire page.
It's worth noting that I am restricted to using only one element for this task. Below is the current code snippet:
.animsition-loading {
background-image: url('../images/logo-loading.png');
width: 100px;
height: 111px;
background-repeat: no-repeat;
background-size: contain;
position: fixed;
top: 50%;
left: 50%;
margin-top: -16px;
margin-left: -16px;
-webkit-animation: spin1 .5s infinite linear;
-moz-animation: spin1 .5s infinite linear;
-o-animation: spin1 .5s infinite linear;
-ms-animation: spin1 .5s infinite linear;
animation: spin1 .5s infinite linear;
}
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}