如何创建带有过渡的文本预加载器

Question

我查看了 Angle 模板，它有一个非常好的预加载器，它看起来像文本有一个内部填充颜色的过渡。非常好。我怎样才能创建这样的预加载器？

请转到此 link 和 select Angular 8 检查示例并等待角度预加载器加载。

查看源代码，我认为他们使用了 2 个不同的 png 图像，一个是空的，另一个是满的。不知何故，这 2 个是使用 jquery?

转换的

HTML:

<div class="preloader-progress">
        <div class="preloader-progress-bar" style="width: 100%;"></div>
</div>

CSS:

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #23b7e5;
    background-image: linear-gradient(90deg,#23b7e5 10%,#19a9d5 90%);
    z-index: 9999;
    transition: opacity .65s}
.preloader-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 30px;
    margin: auto;
    overflow: auto;
    background-image: url(preloader.empty.2272f1a68a000aa26e75.png);
    background-size: 100px 30px}
.preloader-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    min-width: 10px;
    background-image: url(preloader.full.3fbd6a55cddb50dc7cec.png);
    background-size: 100px 30px}
.preloader-hidden {
    display: none}
.preloader-hidden-add {
    opacity: 1;
    display: block}
.preloader-hidden-add .preloader-progress {
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease,-webkit-transform .4s ease;
    -webkit-transform: scale(0);
    transform: scale(0)}
.preloader-hidden-add-active {
    opacity: 0}

如何创建这样的预加载器？

Answer 1

用两种不同颜色叠加两个内容相同的元素。将较高的元素设置为 overflow: hidden 和 width: 0。然后根据需要设置宽度动画。

这是一个使用 CSS 执行此操作的版本。对于进度条，您显然需要挂钩逻辑才能通过 JS 读取进度。

$('button').click(function() {
  $('.higher').addClass('animate');
});

#container {
  position: relative;
}
#container div {
  font: bold 3em arial;
  position: absolute; 
  top: 0;
  left: 0;
}
#container div.lower {
  color: #CCC;
}
#container div.higher {
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  color: #C00;
  transition: width 3s;
}
#container div.higher.animate {
  width: 310px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="lower">Lorem ipsum</div>
  <div class="higher">Lorem ipsum</div>
</div>
<br /><br /><br /><br />
<button>Go!</button>

如何创建带有过渡的文本预加载器

How to create text preloader with transition

css

jquery

preloader