How to show content once pace progress bar is complete?

Question

How to show content once pace progress bar is complete?

336 Views Asked by AudioBubble At 09 April 2019 at 02:26

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);
});

Original Q&A

There are 1 best solutions below

**Mohammed Messaoudi** · Accepted Answer · 2019-04-09T03:04:53.943000

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

How to show content once pace progress bar is complete?

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in PACE

Trending Questions

Popular # Hahtags

Popular Questions