Custom loading screen per view

Customization
1

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.

2

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>
3

Very cool! Thank you @wojtek !

4

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

5

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>
1 Like
6

Where can i find the .svg? We want change the design also. Can’t find the svg in folder where th other .svg files contained

1 Like
7

imagen_2021-06-03_181251
imagen_2021-06-03_1812511562×877 379 KB

I’ve been inspecting the code for the loading animation and doing some research and there is no SVG file.
When creating Scalable Vector Graphics (SVG) files, what is generated is an .XML file with the code that makes up the vector created, that same code is inserted in this space that I indicate.
The question would be, how can we modify that section of the code from the body-end.html or from another file.

8

If head-end.html and body-end snippets are not sufficient for your customization needs, you can customize the whole index.html as described here: Help menu in other languages - #2 by tim.

1 Like
9

Hello @wojtek,

I simply want to convert the circle loading into a straight line. Can you please help with what should be changed in the index.html file ?

This will really help me a lot.

Thank you.

1 Like
10

Hello @wojtek ,

Could you please reply to this question? As it’s really necessary design wise to change it to a straight line for us

Thank you.

11

Hi @nishantambekar, changing a circle to a straight line is not a simple customization, and unfortunately we are unable to help writing such project-specific customization code within the Shapespark support. Please see also this post for more detailed explanation: About the Customization category