Question

我用css创建了一个简单的加载器。它在chrome中运行良好但在firefox中也不起作用。

https://jsfiddle.net/sunilmadaan07/4dcaLegc/

代码如下：

HTML：

<div class='container'>
  <div class='loader'> 
    <div class='loader--text'></div>
  </div>
</div>

Answer 1

Content动画在大多数浏览器中都不起作用。您可以使用插件执行以下操作。

$("#randomArea").Loadingdotdotdot({
                  "speed": 400,
                  "maxDots": 5,
                  "word": "Loading"
              });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/Loadingdotdotdot/js/jquery.loadingdotdotdot.js"></script>
<div id="randomArea" style="position: relative;">done!</div>

<强> Reference Link

Answer 2

嘿，你可以使用普通的JS实现效果，但我使用了jQuery ..

<强> JQUERY

// Simpler, does exactly the same thing:
var i=1;
var txt="Loading";
function go () {
    console.log(i);
    $('.loader--text').text(txt);
    i++;
    txt+=".";
    if(i==5)
    {
    txt="Loading";
    i=1;
    }
    setTimeout(go,1000);
}
go();

JSFIDDLE链接： https://jsfiddle.net/4dcaLegc/5/

Answer 3

问题是animation，:after伪在Firefox中不支持，这就是为什么我在父元素上将一些代码从content更改为width的原因。

检查以下代码段：

＆＃13;

.container {
  height: 100vh;
  width: 100vw;
  font-family: Helvetica;
}

.loader {
  height: 20px;
  width: 80px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.loader-text {
  position: absolute;
  top: 500%;
  left: 0;
  right: 0;
  width:64px;
  overflow:hidden;
  animation: loadertext 3s infinite;
  -moz-animation:loadertext 3s infinite;
}

@-moz-keyframes loadertext {
  0% {
    width:64px;
  }
  35% {
    width:68px;
  }
  60% {
    width:72px;
  }
  100% {
    width:75px;
  }
}
@keyframes loadertext {
  0% {
    width:64px;
  }
  35% {
    width:68px;
  }
  60% {
    width:72px;
  }
  100% {
    width:75px;
  }
}

.loader-text:after {
  content: "Loading...";
  font-weight: bold;
  display:block;
}

＆＃13;

<div class='container'>
  <div class='loader'>
   
    <div class='loader-text'></div>
  </div>
</div>

＆＃13;

css动画在firefox中不起作用？

3 个答案: