2

Bom estou montando um loading em css, porém ele nao esta funcionando no IE11 e Edge.

Segue o código:

    .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>

Alguém sabe qual é o problema?

2 Respostas 2

1

O IE e o Edge precisam que a animação no keyframe seja definida do início ao fim para funcionar, confira que você colocou o seguinte no @keyframes color: 0%, 40%, 66%, 80% e 90%.

Então sua animação está indo de 0% à 90% e possivelmente o Edge (não testei porque não tenho o IE no PC) não considera válido e inicia como deve, porque você também não definiu a propriedade stroke na classe .path.

Você tem 2~3 alternativas:

Colocar o stroke no path com a primeira cor:

.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 */
}

Adicionar o 100% no começo ou no fim:

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

ou

@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;
    }
}

Mas você também terá outro problema, a animação não correrá de forma correta, pois o IE/Edge não tem suporte ao stroke-dashoffset em animações ainda como descrito nesta issue: no support animation css stroke-dashoffset

4
  • Bom tentei sua solução, mas não deu certo 17/03/2017 às 13:16
  • Se está usando arquivo externo, você deu CTRL+F5 para remover o cache? Pois apenas vi a diferença entre o seu code e esse codepen.io/jczimm/pen/vEBpoL, que são os mesmos, e testados... Ou só se tiver algo com a versão do IE/Edge
    – Pliavi
    17/03/2017 às 15:35
  • Bom testei o o link no IE e no EDGE. No IE ele nao funciona, a página fica so carregando e a animação não aparece 21/03/2017 às 20:02
  • vou atualizar minha pergunta com o código que estou tentando alterar, conforme suas explicações 22/03/2017 às 11:49
0

Insira a seguinte linha em sua tag head

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

1
  • não deu certo não. Continua em branco 14/03/2017 às 18:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .