Loading in css does not work in IE11 and Edge

Question

Loading in css does not work in IE11 and Edge

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm building a loading in css, but it's not working on IE11 and Edge.

Follow 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><metahttp-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?

html css

asked by anonymous 14.03.2017 / 18:56

2 answers

Numerical precision in SQLite Unsuccessful Ajax request

score 1 · Answer 1

IE and Edge require that the keyframe animation be set from start to finish to work, make sure you've put the following in @keyframes color : 0%, 40%, 66%, 80% and 90%.

Then your animation is going from 0% to 90% and possibly the Edge (not tested because I do not have IE on the PC) does not consider valid and starts as it should, because you also did not set the stroke .

You have 2 ~ 3 alternatives:

Put the `.path` 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 the beginning 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 also have another problem, the animation will not run correctly, because IE / Edge does not support stroke in animations yet as described in this issue: no support css stroke-dashoffset

score 0 · Answer 2

0

Insert the following line in your head tag

14.03.2017 / 19:03

Loading in css does not work in IE11 and Edge

2 answers

Put the .path in the path with the first color:

Add 100% at the beginning or end:

Put the `.path` in the path with the first color: