Easy Bootsplash

Custom loading screen for Godot web exports, which replaces the default loading bar on itch.io while your game downloads

Defaults: art centered, bar below	image fit: cover with progress at the bottom
Full-width progress at the very bottom	Any custom HTML template of your own

Try every option live on the test bench.

Usage

1. Install the addon from Asset Store or from source (copy addons folder to your project directory)
2. Enable the plugin in your Project Settings
3. Replace addons/easy_bootsplash/assets/background with your game icon or image
4. Tune the look in Project -> Export -> Web -> "Easy Bootsplash", mostly through Parameters (reference below)
5. Export the project

Parameters

The Parameters dictionary is converted to JSON and accessible in the HTML template. Can be used to control elements or behaviors

Existing properties:

Two more keys apply even to custom templates:

Keys of your own reach the template the same way, as {{key}}.

_Note_: Only what JSON format can carry transferred to the page: _strings, numbers, bools, arrays and dictionaries_. The editor keeps the type you picked, so a bool is still a bool, while a Color or a Vector2 arrives as its Godot stringified form

Examples / Presets

Fullscreen key art, no bar.

{
  "fit": "cover",
  "progress_hidden": true
}

Art plus a thin bar pinned to the bottom.

{
  "fit": "cover",
  "progress_placement": "bottom",
  "progress_width": "100vw",
  "progress_height": "12px",
  "progress_color": "#7CFF6D"
}

Export options

The rest of the "Easy Bootsplash" section in the Web export preset:

Dismiss values:

• After First Frame Drawn: waits for RenderingServer.frame_post_draw, so the loader disappears right after the first game frame is drawn
• On Engine Load: uses the engine's own start signal, which fires before the first frame, so the player might see an unfilled frame
• Manually: nothing happens until you call EBS.hide() from GDScript, e.g. when your intro cutscene is ready to be seen

Custom templates

Copy public/default_template.html and point Template at the copy. The root element needs id="ebs"; the runtime finds it by that id. Tokens are substituted as plain text, and a parameter of the same name overrides a built-in token.

Anything from Assets is addressed as {{ASSETS_DIR}}/logo.svg by its name.

<div id="ebs">
  <img alt="" data-src="{{IMAGE_SRC}}" />
  <p>{{tagline}}</p>
  <div class="bar"><i></i></div>
</div>
<style>
  #ebs {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #101014;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease-out;
  }
  #ebs.is-done {
    opacity: 0;
    pointer-events: none;
  }
  .bar {
    width: 320px;
    height: 8px;
    background: #ffffff2e;
  }
  .bar i {
    display: block;
    height: 100%;
    width: var(--ebs-progress-percent, 0%);
    background: #7cff6d;
    transition: width 0.2s linear;
  }
</style>

Two CSS custom properties on the root element stay up to date:

#my-bar {
  width: var(--ebs-progress-percent, 0%);
} /* "42.00%" */
#my-ring {
  opacity: var(--ebs-progress, 0);
} /* 0..1 */

When the overlay is dismissed the root gets the class is-done, then leaves the DOM 400 ms later, which is room for a CSS transition on that class.

Sponsor & Support

⭐ _Star_ ⭐ the repo if it saved you time

You can also support me here: