Loading cursor animation

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:

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

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

    style.innerHTML = this.css.resource || '';
    this.div = document.createElement('div');
    this.div.innerHTML = this.html.resource || '';

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

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