Hot to create a preloader in the RM?

Custom code
1

Hi!
I’m trying to make a preloader for the landing page of my website like this example:https://graveyard.billelis.com/
I don’t know coding, so tried to google some tutorials but don’t find any answer that suits the reading.
Is there any custom code example that I could use as a reference to create a preloader in readymag?
Many Thanks!

2

Hi! There is a way to do that without code: add an image, a video, or an animation you want to be your preloader as a front layer and animate its opacity to zero, setting the delay long enough to allow the website to upload.

1 Like
3

Hello @rapha201133 I think we could help as we built that website! I’ve linked the code below.

<div class="preloader-wrap">
  <div class="percentage" id="precent"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
  @font-face {
    font-family: YOUR FONT HERE;
    src: url("URL HERE");
  }

  body {
    margin: 0;
  }

  .preloader-wrap {
    position: fixed;
    top: 0;
    margin: 0;
    bottom: 0;
    z-index: 4000;
    width: 100%;
    height: 100%;
    background: black;
  }

  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    color: #575757;
    text-align: center;
    font-size: 100px;
    font-family: 'YOUR FONT HERE';
    transform: translate(-50%, -50%);
  }
</style>

<script>
  /***************************************** LOADER *****************************************/
  width = 100,
    perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
    time = parseInt((EstimatedTime / 1000) % 60) * 200 + 50; // Change the speed of the loading effect here

  // Percentage Increment Animation
  var PercentageID = $("#precent"),
    start = 0,
    end = 100,
    durataion = time;
  animateValue(PercentageID, start, end, durataion);

  function animateValue(id, start, end, duration) {

    var range = end - start,
      current = start,
      increment = end > start ? 1 : -1,
      stepTime = Math.abs(Math.floor(duration / range)),
      obj = $(id);

    var timer = setInterval(function() {
      current += increment;
      $(obj).text(current + "%");
      //obj.innerHTML = current;
      if (current == end) {
        clearInterval(timer);
      }
    }, stepTime);
  }

  // Fading Out Loadbar on Finised
  setTimeout(function() {
    $('.preloader-wrap').delay(2000).fadeOut(3000);
  }, time);
</script>
1 Like