Jump to content

Present loading spinner


Recommended Posts

You could do that atleast in two different common ways:

1. Use good old classic css spinner and keep your game canvas hidden and set it visible & start rendering after load is done.

2. Have two containers, one containing a spinner and a second containing your gamescene. Render the spinner container when loading and after load is complete start rendering you scene container.

If on the other hand question is about how to do a spinner animation with pixi, then let me know and I'll help with that.

Link to comment
Share on other sites


In html:

<div id="spinner">...spinner stuff here or in css...</div>

<canvas id="canvas" style="visibility:hidden"></canvas>

In code:
preloadComplete = () => {
  document.getElementById("canvas").style.visibility = "visible";


var spinner = new Spinner(); //Spinner being your spinner class extending container or something else that can be added to maincontainer

//Animate update
  if(spinner.visible)  spinner.update(delta);
  if(mainGame !=null) mainGame.renderLoop();

//This is your main game placeholder, set value to it whenever it's built after load.
let mainGame = null;

//Do your loading logic, build your game and call onLoadComplete
onLoadComplete = () => {
  spinner.visible = false;


Those would work. Written thom without checking any typos or compilation, so there might be errors.

Link to comment
Share on other sites

Also @Exca i build that cals to handle texture loading.

But what i am locking for is indicator to PXIXJS / GPU finish to calculate and ready to draw at the first time.

Can i spot that inside app.ticker loop ?

import { Application, Container } from 'pixi.js';

export class NodeSprites {
	bbgContainer: Container = null;
	spritesMap: Record<string, any>;

	constructor(private pixiApp: Application) {

	destroy(): void {}

	/** If node.type don't have ui representation we will give him fallback */
	public getSprite(spriteName: string): string {
		if (this.spritesMap[spriteName]) {
			return spriteName;
		} else {
			console.log(`${spriteName} don't have sprite representation, please make one!!`);
			return 'NODE.png';

	private handleLoadProgress(loader, resource) {
		// console.log(loader.progress + '% loaded');

	private handleLoadAsset(loader, resource) {
		// console.log('asset loaded ' + resource.name);

	private handleLoadError() {
		// console.error('load error');

	private loadTextures(): void {
		const SPRITES_JSON = 'assets/nodes/node_sprites.json';
			.add('spritesheet', SPRITES_JSON)
			.on('progress', this.handleLoadProgress.bind(this))
			.on('load', this.handleLoadAsset.bind(this))
			.on('error', this.handleLoadError.bind(this))

	private handleLoadSpritesComplete(loader, resource) {
		this.spritesMap = resource.spritesheet.data.frames;
		// console.log('Load Sprites Complete');


Link to comment
Share on other sites

I'm sorry but I dont know what you mean with gpu & pixijs calculations? There shouldnt be any other than loading the assets.

Or do you mean there happens some texture upload which causes a lag spike? You could avoid that by having the textures uploaded before rendering or waiting for one frame to be rendered and on the next frame swap the spinner with scene. Though in that case you couldnt use pixi spinner as the upload would halt it's rendering also.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...