We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Transparent background for the loader screen

Home Forums Programming Transparent background for the loader screen

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #4063
    Groo Gadgets

    Hey guys,

    I am working on building my webGL projects with a transparent background. After searching the forums I can across this post. I was able to use that code to make my webGL background transparent and it works well.

    The only problem I have now is the loading screen is white. I would like to make the loading screen transparent as well.

    Any help would be great!




    Hi Simon,

    You can change the style of the background HTML element. It’s accessible from the preloader object.

    I suppose that the initialization code in your app looks like the following:

    var app = new v3d.App('container', { alpha: true }, new v3d.SimplePreloader({ container: 'container' }));

    Then, you can do something like this:

    var preloader = new v3d.SimplePreloader({ container: 'container' });
    preloader.background.style.opacity = 0;
    var app = new v3d.App('container', { alpha: true }, preloader);

    – here “preloader.background” is the actual HTML element, which style you can modify or completely override. The other HTML elements are accessible as “preloader.gearCont”, “preloader.gear” and “preloader.text” for the gear container, the rotating gear image and the percentage element respectively.

    Co-founder and lead developer at Soft8Soft.


    Hi Ivan,

    Thanks for your answer.
    I’m still having trouble with creating a transparent pre-loader background.
    In the CSS file I have a png image set as the loading icon and a simple progress bar.
    But the background is still white.

    The code that you provided, does it needs to be added to the visual_logic.js?



    <div id="background" style="width: 100%; height: 100%; position: absolute; background: #F8F8F800;"></div>


    Thanks a lot for your reply. Where do I add this, to the CSS file or HTML file? I’m not at all familiar with coding…




    Great thanks! The preloader is now transparent.
    However, I lost the loading bar and logo icons I set in the CSS:

    .v3d-simple-preloader-bar {
    background: blue;
    width: 20px;
    height: 2px;

    .v3d-simple-preloader-logo {
    background-image: url(“./ui_icons/preloader-nollie-icon-512.png”);
    background-size: cover;
    width: 80px;
    height: 80px;

    Any advice on how to get this back on top of the new transparent background?


    set this in CSS and remove those puzzles

    .v3d-simple-preloader-background {
        background-color: #fff0;

    That worked like a charm, thanks a lot!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.