hello there,
i have 2 questions:
1- how can i customize the spinner with the html/css code below:
<style>
*,
*::after,
*::before {
padding: 0;
margin: 0;
}
.main {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
transition: all 1s;
}
.loader {
border-radius: 50%;
border: 1px solid #D4AF37;
position: relative;
}
.loader__inner {
width: 4rem;
height: 4rem;
animation: spin 1s infinite linear;
}
.loader__inner::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 4rem;
height: 4rem;
border-radius: 50%;
border-bottom: 6px solid #D4AF37;
}
.loader__outer {
position: absolute;
top: -30px;
left: -32px;
width: 8rem;
height: 8rem;
animation: spin 1s infinite linear reverse;
}
.loader__outer::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 8rem;
height: 8rem;
border-radius: 50%;
border-bottom: 6px solid #D4AF37;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
-------HTML---
<div class="main">
<img src="images/logo/harmonelogo.png" class="img-fluid" alt="Responsive image" />
<div class="loader loader__inner">
</div>
<div class="loader loader__outer">
</div>
</div>
#2- how can i change the opacity of the spinner background.
image
