Custom P5.JS Loading Screen

Hey guys,

i'm currently editing the index.html file of my sketch to build a custom loading screen. With the below displayed code i've managed it to show a colored background but no text. Does anybody of you have the HTML knowledge to tell me where i have to place the text that it displays above the background but goes away when the loading has finished?

Cause i don't want the text to be displayed when the sketch.js get's shown.

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Do the Wagner</title>

   <style type="text/css">
        body {
            position: relative;

        #p5_loading {
            background-color: #0000FF;
            color: red;
            box-sizing: border-box;
            display: block;
            position: absolut;
            height: 960px;
            width: 540px;


    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

   <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>


  <div id="p5_loading" class="loadingclass"></div>



Thank's alot.



  • edited May 2016 Answer ✓

    The simplest approach would be to add all your html in your p5_loading div and then remove that div with javascript in setup. The only issue of course being that the amount of time this is displayed is not predictable: some people may only see a flash of this content... In that case you could instead wait for a click on a button to launch your sketch..

  • Thank's blindfish. Writing everything into the div works fine. The sketch.js get's overlayed once it finished loading.

Sign In or Register to comment.