Number counter animation preloader window when loading Javascript Html CSS

Question

I want to create a number counter animation on my portfolio website. I have some jquery code in my old website that transitions from the preloader to the website when fully loaded.

<script>
  $(window).on('load', () => {
    $('#preloader').fadeOut(1800, function() {
      $(this).remove();
    });
  });
    </script>

How to add number counter animation and add side to upward transition? Thanks

P粉497463473 · Answer

for you.

Announce count.
Decrease the count value.
Delete the counter span based on the counter value slideUp of your div and .

Example:

$(window).on('load', () => {
  let count = 3;
  function ShowCounter() {
    if (count > 0) {
      $("#spnNumber").fadeOut('slow', function() {
        $("#spnNumber").text(count);
        $("#spnNumber").fadeIn();
        count--;
      });

    } else if (count == 0) {
      $("#preloader").slideUp();
      $("#spnNumber").remove();
      clearInterval(interval);

    }

  }
  var interval = setInterval(function() {
    ShowCounter()
  }, 1000)
});


Loading ...