sinanisler logo

Loading State for Spline3D @splinetool/runtime.js

  1. Imports the Spline runtime for rendering the 3D scene.
  2. Waits for the DOM to load before running the script.
  3. Creates a “loading” div and adds it to the body.
  4. Loads a 3D scene from a URL. Once loaded, hides the “loading” div after a short delay.
  5. If loading fails, displays an error message.

    div.loading {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px;
        display: block;
        text-align: center;
        background: white;
        z-index: 999;
        font-size: 200px;
        font-family: Helvetica;
    #canvas3d {
        width: 100vw;
        height: 100vh !important;

<canvas id="canvas3d"></canvas>

<script type="module">
    import { Application } from '';

    document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.getElementById('canvas3d');
        const spline = new Application(canvas);

        // Dynamically create the loading message with the class 'loading'
        const loading = document.createElement('div');
        loading.innerText = 'Loading...';

        // Append it to the canvas container or the body

            .then(() => {
                // Hide the loading after a delay of 500ms
                setTimeout(() => {
           = 'none';
                }, 500);
            .catch((error) => {
                loading.innerText = 'Error loading the scene.';
                console.error('Error loading the scene:', error);


Leave the first comment