Skip to content

Custom Loader

Oh hi! 👋
Let's talk about the loader.

Powered by 270 Degrees

The loader is the first thing people see while your 3D model loads, so it’s worth making it feel like part of your brand.
You can add a short byline underneath, style the progress bar, change the logo or hide it all completely. A little customization goes a long way in making your viewer feel polished and intentional.

Examples

On-Brand and Polished

A strong first impression that ties perfectly into your visual identity.

<div class="js-270viewer"
     data-270-model="270logo"
     data-270-loader-byline="Retucilating splines..."
     data-270-loader-color="#ff0000, #eba80c"
     data-270-loader-logo="/images/acme-logo.png">
</div>
TSDViewer.create(element, {
    model: '270logo',
    loaderByline: 'Retucilating splines...',
    loaderColor: '#ff0000, #eba80c',
    loaderLogo: '/images/acme-logo.png'
})
Retucilating splines...

Clean and minimal

It's possible to remove elements of the loader for a minimal feel.

<div class="js-270viewer"
     data-270-model="270logo"
     data-270-loader-byline=""
     data-270-loader-color="#000000"
     data-270-loader-logo="">
</div>
TSDViewer.create(element, {
    model: '270logo',
    loaderByline: '',
    loaderColor: '#000000',
    loaderLogo: ''
})

Advanced customisation

If you want to go a step further, you can also fully customize the loader using your own CSS. The default loader elements come with helpful class names you can target:

  • .TSD-loader-container – the wrapper around the entire loader
  • .TSD-loader-bar – the loading bar itself
  • .TSD-loader-byline – the byline text
  • .TSD-loader-logo – the logo image

Disable the loader

For when you've got your own preloader setup. The completion of loading can be monitored via onLoadComplete(). 

<div class="js-270viewer" data-270-model="270logo" data-270-loader="false"></div>

What’s Next?

That's it!
With just a few lines of config, your loader goes from generic to genuinely yours.