Loading cursor animation

Help & Support
,
1

For my project I want to add a cursor animation when a scene changing or when an entity is spawning. Both actions only happen when you press certain buttons. What would be a good way to do this?

I have an html/css element from here:

2

I know how to put the element on screen, but how can I tell the element to stop showing because the scene is loaded?

3

I created a workaround by doing this to create and remove the loading animation. Not sure if this is the best way to go but maybe someone else may find this useful:

var Ui = pc.createScript('ui');
    
Ui.attributes.add('css', {type: 'asset', assetType: 'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType: 'html', title: 'HTML Asset'});
    
// initialize code called once per entity
Ui.prototype.initialize = function () {


    var style = document.createElement('style');

    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    

    this.app.on('loadingCircleOn', function() { 

        var existingDiv = document.querySelector('.container');
        if (existingDiv) {
            existingDiv.remove();
        }
        document.body.appendChild(this.div);
    }, this);

};