Loading in css does not work in IE11 and Edge

Question

Well I’m mounting a css loading, but it’s not working on IE11 and Edge.

Follows the code:

    .loading {
    background-color: #EEF2F5;
    position: fixed;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.log-box {
    position: absolute;
    left:50%;
    top: 50%;
    margin-top:-90px;
    margin-left:-50px;
}
.loader {
    position: relative;
    margin: 0 auto;
    width: 100px;
}
.loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.circular {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #F65314;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}
@keyframes color {
    0% { 
        stroke: #F65314;
    }
    40% {
        stroke: #0091FF;
    }
    66% {
        stroke: #34A853;
    }
    80%, 100% { /* possível que essa cor acabe durando mais que deve */
        stroke: #FBBC05;
    }
}

<!-- Material Icons (Google) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Inicializa o Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<div class="loading">
    <div class="log-box">
        <div class="loader">
            <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
            </svg>
        </div>
    </div>
</div>

Does anyone know what the problem is?

Answer 1

IE and Edge need the animation on keyframe be set from start to finish to work, check that you put the following in the @keyframes color: 0%, 40%, 66%, 80% and 90%.

So your animation is going from 0% to 90% and possibly Edge (I haven’t tested because I don’t have IE on PC) doesn’t consider valid and starts as it should, because you also haven’t set the property stroke in class .path.

You have 2~3 alternatives:

Put the stroke in the path with the first color:

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #F65314 /* Alteração */
}

Add 100% at start or end:

@keyframes color {
    100, 0% { /* Como no original */
        stroke: #F65314;
    }
    40% {
        stroke: #0091FF;
    }
    66% {
        stroke: #34A853;
    }
    80%,
    90% {
        stroke: #FBBC05;
    }
}

or

@keyframes color {
    0% { 
        stroke: #F65314;
    }
    40% {
        stroke: #0091FF;
    }
    66% {
        stroke: #34A853;
    }
    80%, 100% { /* possível que essa cor acabe durando mais que deve */
        stroke: #FBBC05;
    }
}

But you will also have another problem, the animation will not run correctly, because IE/Edge has no support for stroke-dashoffset in animations still as described in this Issue: no support Animation css Stroke-dashoffset

Answer 2

Insert the following line into your head tag

meta http-equiv="X-UA-Compatible" content="IE=edge"