Is there an way to make loading progress bar run again in visjs? - vis.js

Question

I have created a new network visualization using visjs and I follow the example here: http://visjs.org/examples/network/exampleApplications/loadingBar.html to implement a loading progress bar and it worked perfectly.
I can switch to other 2 visualizations using a radio button. When I load the other visualizations the loading bar doesn't appear again.
I would like to know how to call the loading bar again.
Thanks in advance.
...
<input type="radio" name="op" onclick="net1()" checked>
<input type="radio" name="op" onclick="net2()">
<div id="wrapper">
<div id="network1"></div>
<div id="network2" style="display: none;"></div>
<div id="loadingBar">
<div class="outerBorder" style="left: 100%;">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
<script>
function function1(){
...//create network
network.on("stabilizationProgress", function (params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations / params.total;
var width = Math.max(minWidth, maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
});
network.once("stabilizationIterationsDone", function () {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
setTimeout(function () {
document.getElementById('loadingBar').style.display = 'none';
}, 500);
});
}
function function2(){
...//create onther network
network.on("stabilizationProgress", function (params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations / params.total;
var width = Math.max(minWidth, maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
});
network.once("stabilizationIterationsDone", function () {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
setTimeout(function () {
document.getElementById('loadingBar').style.display = 'none';
}, 500);
});
}
</script>
<script>
function net1() {
function1();
document.getElementById('network1').style.display = "block";
document.getElementById('network2').style.display = "none";
}
function net2() {
document.getElementById('network1').style.display = "none";
function2();
document.getElementById('network2').style.display = "block";
}
</script>

Answer 1

I solved it changing the methods stabilizationProgress and stabilizationIterationsDone to:
network.on("stabilizationProgress", function (params) {
document.getElementById('loadingBar').style.opacity = 1;
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations / params.total;
var width = Math.max(minWidth, maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor * 100) + '%';
});
network.on("stabilizationIterationsDone", function () {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
});