Disable logo

[Nostalgiaplatz]

I have an issue where the logo doesn't load immediately and only actually appears just before loading my app is done.

Is there a way to disable the logo entirely and only use the html, I tried a couple of things but there is always an empty img tag added to the splash page!

[jhdavids8]

Yep! You can specify a custom template if you like that simply omits the logo, and we should handle that just fine (via the template option). Here's the default template we use. Try passing this in without the logo, and let me know if that works.

<div class='pg-loading-inner'>
  <div class='pg-loading-center-outer'>
    <div class='pg-loading-center-middle'>
      <h1 class='pg-loading-logo-header'>
        <img class='pg-loading-logo'></img>
      </h1>
      <div class='pg-loading-html'>
      </div>
    </div>
  </div>
</div>

[ricolo]

@jhdavids8 Thanks for this nice plugin. I tried to control the logo size using template option, however once I added this option, it cannot close the loading screen with finish() command. Is it because it's not an official option?

[emekaelo]

Yep! You can specify a custom template if you like that simply omits the logo, and we should handle that just fine (via the template option). Here's the default template we use. Try passing this in without the logo, and let me know if that works.

<div class='pg-loading-inner'>
  <div class='pg-loading-center-outer'>
    <div class='pg-loading-center-middle'>
      <h1 class='pg-loading-logo-header'>
        <img class='pg-loading-logo'></img>
      </h1>
      <div class='pg-loading-html'>
      </div>
    </div>
  </div>
</div>

I needed to style image size so it was helpful to see this since it wasn't in the documentation. The value of the template option should be wrapped in backticks like

pleaseWait({
...,
template: `
<div class='pg-loading-inner'>
  <div class='pg-loading-center-outer'>
    <div class='pg-loading-center-middle'>
      <h1 class='pg-loading-logo-header'>
        <img class='pg-loading-logo'></img>
      </h1>
      <div class='pg-loading-html'>
      </div>
    </div>
  </div>
</div>
`,
...
})