# Hot to create a preloader in the RM?

**URL:** <https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080>\
**Category:** Custom code\
**Created:** [January 10, 2023, 3:02pm UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080 "2023-01-10T15:02:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rapha201133](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/rapha201133/32/768_2.png) [@rapha201133](https://forum.readymag.com/u/rapha201133)\
**Post date:** [January 10, 2023, 3:02pm UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080/1 "2023-01-10T15:02:01Z")

</div>

Hi!  
I’m trying to make a preloader for the landing page of my website like this example:[https://graveyard.billelis.com/](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!

---

<div class="post-metadata">

**Author:** ![Readymag](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/readymag/32/3_2.png) [@Readymag](https://forum.readymag.com/u/Readymag)\
**Post date:** [January 13, 2023, 3:01pm UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080/2 "2023-01-13T15:01:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [January 27, 2023, 8:38pm UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080/3 "2023-01-27T20:38:31Z")

</div>

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

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Ilya\_Buyalski](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/ilya_buyalski/32/2478_2.png) [@Ilya\_Buyalski](https://forum.readymag.com/u/Ilya_Buyalski)\
**Post date:** [October 8, 2024, 7:45am UTC](https://forum.readymag.com/t/hot-to-create-a-preloader-in-the-rm/1080/4 "2024-10-08T07:45:18Z")

</div>

we could not show percentage but using loader animation ar progress bar is pretty fair. We slihgtly upgraded previous code in the thread. 🖖

Check this out: [https://artdirect.me/](https://artdirect.me/)

code

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

<style>

  body {
    margin: 0;
  }

  .preloader-wrap {
    position: fixed;
    top: 0;
    height: 5px;
    width: 100%;
    z-index: 4000;
    overflow: hidden;
  }

  .percentage {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    width: 100%;
    transition: transform .3s ease-out;
    background: #EA0777;
  }
</style>

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

    $(document).ready(() => {
       const percent = $('#precent'),
      	 preloader = $('.preloader-wrap'),
        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

      function waitUntillSliderReady(onSuccess) {
        const photoWidgetWrapper = $('.rmwidget.widget-shots').first();
        if(photoWidgetWrapper) {
          const cover = photoWidgetWrapper.find('.shots-cover');
          if(cover.children().length > 1 ) {
           requestAnimationFrame(() => waitUntillSliderReady(onSuccess));
          } else {
            onSuccess();
          }
        }      
      }

      function animateValue(start, end, duration) {
        var range = end - start,
          current = start,
          increment = end > start ? 1 : -1,
          stepTime = Math.abs(Math.floor(duration / range));

        var timer = setInterval(function() {
          current += increment;
          const left = Math.round(80 * (current / 100));
          percent.css({transform: 'translate3d(' + left + '%,0,0)'});
          console.log(left);
          //obj.innerHTML = current;
          if (current === end) {
            clearInterval(timer);
            waitUntillSliderReady(() => {
               percent.css({transform: `translate3d(100%,0,0)`});
               preloader.fadeOut(1000);
             });
          }
        }, stepTime);
      }

      // Percentage Increment Animation
      var start = 0,
        end = 100,
        durataion = time;
      animateValue(start, end, durataion);
   });
  
  
</script>

```