Back to the Shapespark home page

Custom loading screen per view

I would like to know if it is possible to have custom loading screens not just for the loading view but also for another view that is saved in the scene?
Because when I load a scene with a selected view, which is not the main view (loading screen) I first see the loading screen, but then the camera looks into a totally different direction, which feels a bit odd.

It’s possible with a bit of JavaScript coding and hosting the custom images on own server. Please place the following snippet in body-end.html and adapt the view names and image URLs:

<script>
  if (window.location.hash) {
    var params = window.location.hash.substring(1).split('&');
    var cover = document.getElementById('cover-image');
    if (params.indexOf('view=<VIEW-1>') !== -1) {
      cover.style.backgroundImage = "url('<URL-OF-IMAGE-1>')";
    } else if (params.indexOf('view=<VIEW-2>') !== -1) {
      cover.style.backgroundImage = "url('<URL-OF-IMAGE-2>')";
    }
  }
</script>

Very cool! Thank you @wojtek !

Hello @wojtek, can you also share script to use our own images as loading screen animation instead of the default circle loading screen which comes with shapespark.

Thank you

The circle showing the progress isn’t easily replaceable with images. It’s built from SVG elements and the viewer code assumes certain structure of the elements. You can adjust the circle style by adding a CSS snippet in the head-end.html file, though. For example, the following snippet changes the color of the progress indicator to white.

<style>
#primary-progress-done {
  stroke: #fff;
}
</style>