Search code examples
jquerycsspreloader

How to create text preloader with transition

I looked at the Angle template and it has a really nice preloader where it looks like the text has a transition with color filling inside it. Very nice. How can I create a preloader like this?

enter image description here enter image description here Please check the sample by going to this link and select Angular 8 and wait for the Angle preloader to load.

Looking at the source code, I think they use 2 different png images, one is empty and another is full. And somehow the 2 are transitioned using 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}

How to create a preloader like this?

Solution

  • Overlay two elements with identical content of two different colours. Set the higher element to overflow: hidden and width: 0. Then animate the width as needed.

    Here's a version which does this using CSS. For a progress bar you'd obviously need to hook in the logic to read the progress via 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>