/*online-demo*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading</title>
<style>
html,
body{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.scene{
width: 100%;
height: 100%;
}
.loading{
display:flex;
align-items:center;
justify-content: center;
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:1000;
}
.loading div{
background-image:url(//4dkk.4dage.com/v4/example/loading.gif);
width:100px;
height:20px;
}
</style>
</head>
<body>
<div id="scene" class="scene"></div>
<div class="loading">
<div></div>
</div>
<script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
<script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
<script>
var kankan = new KanKan({
dom:'#scene',
num:'KJ-JYo2ZZyKKJ'
})
var $loading = document.querySelector('.loading')
kankan.Scene.on('ready',()=>{
$loading.style.display = 'none'
})
kankan.render()
</script>
</body>
</html>
