Fiddle: https://jsfiddle.net/0qqnvrdg/
HTML:
<div class="loading"></div>
CSS:
body {
background: #0d8aa5;
}
.loading {
position: absolute;
left: 50%;
top: 25%;
/*margin: -60px 0 0 -60px;*/
background: #fff;
width: 200px;
height: 200px;
border-radius: 100%;
border: 10px solid #19bee1;
}
.loading:after {
content: '';
background: trasparent;
width: 140%;
height: 140%;
position: absolute;
border-radius: 100%;
top: -20%;
left: -20%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.loading:before {
background-image: url('https://i.sstatic.net/UTnLP.png');
background-size: 100%;
background-repeat: no-repeat;
display: block;
width: 85%;
height: 85%;
content:"";
position: absolute;
top: 20%;
left: 10%;
}
How can I adjust the CSS so that the image goes beneath the thin blue border but remains on top of the white background?
Is this modification feasible?