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
4

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

Check this out: https://artdirect.me/

code

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