# How can I use p5.js sketch as loader for website?
**URL:** https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890
**Category:** Coding Questions
**Created:** [May 5, 2021, 2:41pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890 "2021-05-05T14:41:22Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@cn13](https://discourse.processing.org/u/cn13)
#### Post date: [May 5, 2021, 2:41pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/1 "2021-05-05T14:41:22Z")
hi there,
i have created a p5.js sketch and tried to implement it on my website as a loader… the problem is, that i have to load the p5.js sketch in the body part of my HTML because the sketch would still be visible after loading the page, if i put it in the head…
```auto
//content of my website
```
thank you for helping!
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 5, 2021, 7:49pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/2 "2021-05-05T19:49:06Z")
Hi! Welcome to the forum!
It’s hard to guess what exactly want to do from the snippet - but I think what you need is `parent` to attach p5 sketch canvas to a specific div
[https://p5js.org/reference/#/p5.Element/parent](https://p5js.org/reference/#/p5.Element/parent)
because
```auto
```
actually doesn’t mean that the sketch goes into `#loader`.
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [May 5, 2021, 8:01pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/3 "2021-05-05T20:01:38Z")
@micuat is spot on that you are not actually attaching the p5js canvas to the “loader” div. And there are several ways to fix that, one is using parent property, another is using [instance mode](https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace) via the [p5 constructor](https://p5js.org/reference/#/p5/p5), which takes an argument specifying the parent element for the canvas.
However, one other thing that bears noting, just hiding the div is potentially still going to leave the p5js sketch running and consuming resources. You would do well to also call [remove()](https://p5js.org/reference/#/p5/remove) to completely stop the sketch.
I’ve made a simple example [on jsfiddle](https://jsfiddle.net/sflanker/kmq2o60s/1/).
```auto
NOTHING TO SEE HERE YET
```
---
### Author:  [@cn13](https://discourse.processing.org/u/cn13)
#### Post date: [May 6, 2021, 5:54pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/4 "2021-05-06T17:54:57Z")
Hi @KumuPaul
Yeah that’s exactly what i tried to do! Thank you so much for your help!
I have only one Question: Where should I put the content of my Website?
Because if I put it in the root div its only visible before the loader appears
```auto
NOTHING TO SEE HERE YET
```
Because everything I put here overlaps with the root div:
```auto
root.innerHTML = 'Hooray our app has loaded!';
```
and I have too much content to put everything in the innerHTML function…
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [May 6, 2021, 6:25pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/5 "2021-05-06T18:25:40Z")
can’t you add contents to a div inside `#root`, make it `display: none` by default and take the `display` property out when the sketch is gone?
---
### Author:  [@cn13](https://discourse.processing.org/u/cn13)
#### Post date: [May 6, 2021, 6:34pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/6 "2021-05-06T18:34:30Z")
Oh yes that should work… Thank you!
---
### Author:  [@cn13](https://discourse.processing.org/u/cn13)
#### Post date: [May 6, 2021, 8:19pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/7 "2021-05-06T20:19:57Z")
I tried to implement the code of @KumuPaul in my website but i have still 3 issues with it…
1. I tried to implement my p5.js sketch into your script tag, but made a some bugs in doing so… where should i put the p. if i have a variable in front of it?
```auto
myText.p.splice(space, 0, '');
```
1. I have a second p5.js sketch, which should display when the site is loaded… i tried to put it in the head section with the defer attribute, somehow it doesn’t work everytime i reload…
2. I have an Accordion, which broke when I tried to implement your code… somehow it works if I resize the screen…
If you could help me again with these issues I would be soo thankful!
Maybe it helps if you could have a look on [my project](https://test.cianjochem.ch) and the [loader sketch](https://editor.p5js.org/cn13/sketches/vlFFWe3eg):
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [May 6, 2021, 8:57pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/8 "2021-05-06T20:57:27Z")
When using p5js in instance mode you only need to use the `p` variable when accessing global/static p5.js functions and constants (like `createCanvas()` or `text()` or `width`). It looks like you’re conflating the p5.js static splice function and the built in javascript instance function on arrays. It also looks like you may be trying to use splice with a string which won’t work since it only works on arrays. And the p5.js splice function is deprecated in any case.
Is your project hosted on Glitch? I saw a glitch cdn URL in there which is why I ask. If you can share a link to your project I might be able to help you out (I’m [@KumuPaul](https://glitch.com/@KumuPaul) on glitch if it’s private).
---
### Author:  [@cn13](https://discourse.processing.org/u/cn13)
#### Post date: [May 6, 2021, 10:24pm UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/9 "2021-05-06T22:24:04Z")
Yeah i tried to uploaded it on github, but i’m not sure how it will work because its made with Kirby CMS…
but sent you an invitation if you want to have a look 🙂
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [May 7, 2021, 4:00am UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/10 "2021-05-07T04:00:13Z")
Ugh, I hate CMSs, they’re all terrible. Here you go:
> **[Glitch](https://glitch.com/edit/#!/cianjochem-porfolio-debug?path=index.html:57:51)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast
Things I had to change:
1. Moved the loading screen div and the loading screen script up to the top of the file.
- this is important because the browser loads page content in linear order, and you want that loading screen to show up ASAP.
2. Inlined the loading screen sketch into the loading screen script block:
```auto
```
1. Converted the header sketch to also be an instance mode sketch and inlined it into the script block at the end of the file:
```javascript
console.log(`${new Date()} creating loading timeout.`);
setTimeout(
() => {
console.log(`${new Date()} loading complete.`);
// Signal the loading sketch to stop, and the header sketch to start
document.dispatchEvent(new CustomEvent("appLoaded"));
// Stop displaying the loading div, start displaying the content
document.body.classList.add("loaded");
},
7000 // simulate the app taking 7 seconds to load
);
function headerSketch(p) {
let font;
let space;
let myCanvas;
let amount = 40;
let myText = ["C", "I", "A", "N", "", "J", "O", "C", "H", "E", "M"];
p.preload = function() {
font = p.loadFont(
"https://cdn.glitch.com/ba7ae563-6481-4d92-8b25-48f6cd661df0%2FEverettMono-Regular-web.ttf?v=1617819670199"
);
};
p.setup = function() {
myCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
myCanvas.position(40, 0);
myCanvas.style("z-index", "-999");
for (let i = 0; i < 29; i++) {
if (p.mouseX < p.width / 2) {
space = p.floor(p.random(1, 11 + i));
} else if (p.mouseX > p.width / 2) {
space = p.floor(p.random(1, 11 + i));
}
myText.splice(space, 0, "");
}
};
p.draw = function() {
p.background(247, 50);
p.textFont(font);
p.fill(0);
p.textSize(16);
let tileW = (p.width - 80) / amount;
for (let x = 0; x < amount; x++) {
p.push();
p.translate(x * tileW, 60);
p.text(myText[x], 0, 0);
p.pop();
}
};
p.windowResized = function() {
p.resizeCanvas(p.windowWidth, p.windowHeight);
};
}
let header = new p5(headerSketch, "header");
```
For some reason I haven’t been able to determine, p5.js sometimes takes its sweet time getting the loading screen up and running. I’m not sure what can be done about that.
---
### Author:  [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [May 7, 2021, 5:46am UTC](https://discourse.processing.org/t/how-can-i-use-p5-js-sketch-as-loader-for-website/29890/11 "2021-05-07T05:46:35Z")
Oh, I forgot, I made some tweaks to the CSS as well.
```css
#loading_screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
body.loaded #loading_screen {
display: none;
}
/* Use the loaded CSS class for everything instead of manipulating styles.
This simplifies the code and makes it easier to customize the display with
alternate stylesheets (i.e. for printing) */
body:not(.loaded) #content {
/* Use visibility instead of display because I think the browser does more
of the layout work if with visibility: hidden. With display: none it might
just ignore the content completely. Not 100% sure about this though. */
visibility: hidden;
}
body.loaded #content {
visibility: visible;
}
```