0

I am attempting to have the content inside 'wrapper' only fade in once the pace progress bar finishes loading

Does anyone have any suggestions? Here is pen https://codepen.io/anon/pen/VNmBWQ

JS

Pace.on("done", function(){
  $(".wrapper").fadeIn(3000);
});

1 Answers1

0

 $(function() {
        Pace.on("done", function(){
          $(".wrapper").fadeIn(1000);
        });
    });
body {
      margin: 0px;
      background-color: #ff6666;
    }

    h1 {
      padding-top: 200px;
    }
            body {
      margin: 0px;
      background-color: #ff6666;
    }

    h1 {
      padding-top: 200px;
    }
        .wrapper
        {
          display:none;
        }
      .pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: rgba(34, 153, 221, 0.19999999999999996);
  position: fixed;
  z-index: -1;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"></script>
    <script src="https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/0.4.1/themes/pace-theme-fill-left.css">



    <body >
      <div class="wrapper">
      
      <h1>Lorem Ipsum Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida.
        Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida.
    Velit, in at aenean vitae urna dictumst risus viverra inceptos aliquam! Tincidunt cum morbi morbi cum bibendum fermentum quam euismod vitae. Senectus lacinia vestibulum euismod pulvinar cursus orci rhoncus urna. Mi sodales sollicitudin in eleifend himenaeos ipsum penatibus elit per. Gravida tempus ullamcorper et semper accumsan lorem at auctor velit. Pulvinar primis class mi vitae nisl ad orci consequat lobortis urna phasellus. Dolor ut non conubia libero mollis enim suscipit, adipiscing fermentum. Nullam praesent, iaculis luctus massa lobortis dapibus habitant sit curabitur nisi consectetur. Felis dignissim quis habitant porttitor cum mauris, conubia.

    Cras metus montes dictum potenti ridiculus habitant neque litora ligula? Praesent lectus potenti pellentesque. Dolor facilisis rutrum eleifend! Ipsum velit fames habitant integer. Sagittis erat mattis morbi; nullam aenean torquent erat accumsan tempor. Iaculis donec maecenas sollicitudin natoque mi nibh ultricies curabitur nisl venenatis rhoncus. Tempor mi hendrerit quam vitae sit metus.

    Accumsan erat arcu ligula sit tristique inceptos fusce dictum lacus. Eros maecenas semper fringilla. Tempor fringilla fusce non quam congue sollicitudin lobortis mi id! Potenti, hendrerit odio pulvinar. Netus porta platea arcu vestibulum curabitur volutpat. Dui ante dis blandit congue quis eu luctus laoreet velit dictumst mollis? Varius suspendisse sollicitudin tristique lectus. Pellentesque lobortis velit maecenas congue. Egestas ante donec hac porta lectus accumsan? Hendrerit platea curae; mollis iaculis sollicitudin turpis hendrerit. Elementum!

    Auctor sollicitudin aliquam vulputate purus arcu congue gravida! Platea purus, eros egestas nisl lacinia ultricies consectetur scelerisque orci fusce praesent rhoncus! Habitasse penatibus quisque ligula nibh? Nisi suspendisse in urna libero ridiculus a tellus parturient enim libero sed. Fermentum lectus auctor erat vitae tempus himenaeos ad placerat ornare egestas ligula? Netus euismod rhoncus volutpat in id arcu nulla magna eros torquent facilisis dui. Dis condimentum rhoncus senectus primis!

    Morbi sagittis, feugiat aenean. Per placerat vitae condimentum arcu nam ridiculus pulvinar quis ultricies. Amet mi fames ridiculus ultrices tristique arcu vivamus quis eros libero. Rutrum euismod vel posuere accumsan fringilla congue dictum. Quis auctor nam quam turpis. Lectus malesuada ornare, egestas suscipit netus a velit ligula ipsum ipsum ultrices eleifend. Fusce gravida!!

    </h1>
        </div>
    </body>
Mohammed Messaoudi
  • 106
  • 7
  • Thanks for your reply! This works however I am not looking for the corner spinning loading bar but rather the minimal progress bar I already had in place –  Apr 09 '19 at 03:54
  • Well since you said whenever ;) I am also attempting to create the same effect except using the fill left pace progress bar https://cdnjs.cloudflare.com/ajax/libs/pace/0.4.1/themes/pace-theme-fill-left.css –  Apr 09 '19 at 05:31
  • I tried that and it doesnt seem to work, the edit doesnt seem to be working either –  Apr 09 '19 at 05:42
  • 1
    problem is the color? check now ? – Mohammed Messaoudi Apr 09 '19 at 05:47
  • Still not working, just to clarify I'm looking for the full page loading bar from the left –  Apr 09 '19 at 05:51
  • 1
    @Sasha.Burger i hope that you're looking for, check now, haha – Mohammed Messaoudi Apr 09 '19 at 06:00
  • sorry for the late reply! This is work great! I have 2 question though, how to I slow down the speed of the load bar? I tried data-pace-options='{ "ghostTime": 1000 }' with no success and the second thing is the load bar starts as blue but ends in another colour, how can I make it a consistent colour for the entire load bar? Thanks so much for your help! –  Apr 10 '19 at 04:23
  • 1
    ghostTime is the minimum amount of time the bar should sit after the last update before disappearing, to change speed of your loader you need `eventLag : { minSamples: 10, sampleCount: 300, lagThreshold: 1 }` Reference : https://stackoverflow.com/questions/28530354/increase-progressbar-loading-time-in-pace-js?rq=1 , any question i'm here :) – Mohammed Messaoudi Apr 10 '19 at 12:21