167 lines
6.0 KiB
HTML
167 lines
6.0 KiB
HTML
<html>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
|
|
|
|
<style type="text/css">
|
|
|
|
#mynetwork {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
border: 1px solid lightgray;
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
|
|
#loadingBar {
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color:rgba(200,200,200,0.8);
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
opacity:1;
|
|
}
|
|
|
|
#bar {
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
width:20px;
|
|
height:20px;
|
|
margin:auto auto auto auto;
|
|
border-radius:11px;
|
|
border:2px solid rgba(30,30,30,0.05);
|
|
background: rgb(0, 173, 246); /* Old browsers */
|
|
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
#border {
|
|
position:absolute;
|
|
top:10px;
|
|
left:10px;
|
|
width:500px;
|
|
height:23px;
|
|
margin:auto auto auto auto;
|
|
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
|
border-radius:10px;
|
|
}
|
|
|
|
#text {
|
|
position:absolute;
|
|
top:8px;
|
|
left:530px;
|
|
width:30px;
|
|
height:50px;
|
|
margin:auto auto auto auto;
|
|
font-size:22px;
|
|
color: #000000;
|
|
}
|
|
|
|
div.outerBorder {
|
|
position:relative;
|
|
top:400px;
|
|
width:600px;
|
|
height:44px;
|
|
margin:auto auto auto auto;
|
|
border:8px solid rgba(0,0,0,0.1);
|
|
background: rgb(252,252,252); /* Old browsers */
|
|
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
|
|
border-radius:72px;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
<div id="mynetwork" style = "background-color: #0f0f0e;"></div>
|
|
<div id="loadingBar">
|
|
<div class="outerBorder">
|
|
<div id="text">0%</div>
|
|
<div id="border">
|
|
<div id="bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
function draw() {
|
|
var color = 'gray';
|
|
|
|
var nodes = {{nodes}} ;
|
|
|
|
var edges = {{edges}} ;
|
|
// create a network
|
|
var container = document.getElementById('mynetwork');
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var options = {
|
|
autoResize: true,
|
|
layout: {
|
|
improvedLayout:false,
|
|
},
|
|
height: '100%',
|
|
width: '100%',
|
|
nodes: {
|
|
shape: 'dot',
|
|
size: 8,
|
|
font: {
|
|
size: 5,
|
|
color: '#ffffff'
|
|
},
|
|
borderWidth: 1
|
|
},
|
|
edges: {
|
|
width: 1,
|
|
color: {
|
|
color:'#356b6b',
|
|
highlight:'#4286f4',
|
|
hover: '#41f4f4',
|
|
inherit: 'from',
|
|
opacity:1.0
|
|
},
|
|
},
|
|
interaction: {
|
|
hoverConnectedEdges: true,
|
|
tooltipDelay: 200
|
|
}
|
|
};
|
|
network = new vis.Network(container, data, options);
|
|
network.on("stabilizationProgress", function(params) {
|
|
document.getElementById('loadingBar').removeAttribute("style");
|
|
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;
|
|
// really clean the dom element
|
|
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
|
|
network.setOptions( { physics: false } );
|
|
});
|
|
return network;
|
|
};
|
|
draw();
|
|
</script>
|
|
</html> |