We are facing an issue in IOS version 16.3.1
where the animation based loader is not getting visible, but .svg based loader is working fine and
the same animation based loader is working fine in android and windows, and all the remaining versions of IOS as well
The html code :
<div class="showbox overlayhideclass" id="overlayhideapple" style="display:none;opacity:2.9;">
<div class="loader">
<svg class="circular darkLoader" style="display:none;" viewBox="25 25 50 50">
<!-- Background ring -->
<circle class="background-ring" cx="50" cy="50" r="22"></circle>
<!-- Loading circle -->
<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>
</svg>
<svg class="circular lightLoader" style="" viewBox="25 25 50 50">
<!-- Background ring -->
<circle class="background-ring" cx="50" cy="50" r="22"></circle>
<!-- Loading circle -->
<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>
</svg>
</div>
</div>
classes:
.loader {
position: relative;
margin: 0 auto;
width: 100px;
&:before {
content: "";
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 1s linear infinite;
height: 100%;
transform-origin: center center;
width: 74.84%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.background-ring {
fill: none;
stroke: rgb(227, 226, 231);
stroke-width: 6;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -100px;
}
30% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -100px;
}
100% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -100px;
}
}
@keyframes color {
100%,
0% {
stroke:var(--loader-icon);
}
40% {
stroke:var(--loader-icon);
}
66% {
stroke:var(--loader-icon);
}
80%,
90% {
stroke:var(--loader-icon);
}
}
body {
background-color: var(--white);
}
.showbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
.overlayhideclass {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
opacity: 2.9;
background-color: Var(--pg-bg-primary);
z-index: 9999;
display: flex;
justify-content: center;
justify-items: center;
justify-self: center;
overflow:-y:hidden;
}
.darkLoader {
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
.lightLoader{
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
}
