0
103
ViewsAdd Loader until stl image load PHP
I am using Stl Viewer Javascript Plugin to display 3D image in my Website. The size of STL image is around 50MB. So, it is taking much time to load. So is it feasible to add loader image until the stl image load.
I am using this plugin, https://www.viewstl.com/plugin/
Please check my code below,
<body style="margin:0px;">
<div id="stl_cont" style="width:600px;height:600px;margin:0; background:#ebebeb; overflow: hidden;"></div>
<script src="stl_viewer.min.js"></script>
<script>
var stl_viewer=new StlViewer
(
document.getElementById("stl_cont"),
{
models:
[
{filename:"/test/Sienna.stl"}
]
}
);
</script>
</body>
Please check the screenshot of the front-end,
·
Juan Pablo Isaza
1 answers
Answer question0
I tried the code i pasted below and it is working fine on my local machine, please check and let me know if it's working for you also.
P.S please replace image element's source with an appropriate gif url to get it working
<body style="margin: 0px">
<div
id="stl_cont"
style="
width: 600px;
height: 600px;
margin: 0;
background: #ebebeb;
overflow: hidden;
"
>
<div
class="loading"
style="
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img src="./assets/images/icons8-dots-loading.gif" alt="" />
</div>
</div>
<script src="stl_viewer.min.js"></script>
<script>
var stl_viewer = new StlViewer(document.getElementById("stl_cont"),
{
models: [
{ filename: "/test/Sienna.stl" }
],
all_loaded_callback: function () {
document.querySelector(".loading").remove();
},
}
);
</script>
</body>
·
Juan Pablo Isaza
Report
Answer question