docs: Default Splash / Loading screen for web app in index.html #177084
+8
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
tool
Contributor
Author
|
I should we load it dynamically from a separate file so one can easily delete / replace it (?) |
This reverts commit 144394c.
Contributor
Author
|
Proposal for default {{flutter_js}}
{{flutter_build_config}}
// Set the theme from the URL param, with fallback to user preference if no theme is
// specified.
const queryParams = new URLSearchParams(window.location.search);
let theme = queryParams.get("brightness");
theme ||= window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.body.classList.add(theme);
const splashScreenStyle = document.createElement('style');
splashScreenStyle.textContent = `
/* Background */
body.light {
background-color: #E6EBEB;
}
body.dark {
background-color: #121212;
}
/* Loading indicator */
body {
inset: 0;
overflow: hidden;
margin: 0;
padding: 0;
position: fixed;
}
#loading {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
#loading img {
animation: 1s ease-in-out 0s infinite alternate breathe;
opacity: .66;
transition: opacity .4s;
}
#loading.main_done img {
opacity: 1;
}
#loading.init_done img {
animation: .33s ease-in-out 0s 1 forwards zooooom;
opacity: .05;
}
@keyframes breathe {
from { transform: scale(1); }
to { transform: scale(0.95); }
}
@keyframes zooooom {
from { transform: scale(1); }
to { transform: scale(0.01); }
}
`;
document.head.appendChild(splashScreenStyle);
const loading = document.createElement('div');
loading.id = 'loading';
const indicator = document.createElement('img');
indicator.alt = 'Loading indicator...';
indicator.src = 'icons/Icon-192.png';
indicator.height = 100;
loading.appendChild(indicator);
document.body.appendChild(loading);
// See example for progress indicator:
// https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator
_flutter.loader.load({
onEntrypointLoaded: async function (engineInitializer) {
loading.classList.add('main_done');
const appRunner = await engineInitializer.initializeEngine();
loading.classList.add('init_done');
await appRunner.runApp();
// Wait a few milliseconds so users can see the "zoooom" animation
// before getting rid of the "loading" div.
window.setTimeout(function () {
loading.remove();
}, 200);
}
}); |
Gustl22
changed the title
bkonyi
approved these changes
Oct 29, 2025
mdebbar
approved these changes
Oct 29, 2025
mdebbar
added
the
autosubmit
auto-submit
bot
removed
the
autosubmit
Contributor
|
autosubmit label was removed for flutter/flutter/177084, because The base commit of the PR is older than 7 days and can not be merged. Please merge the latest changes from the main into this branch and resubmit the PR. |
auto-submit
bot
removed
the
autosubmit
Contributor
|
autosubmit label was removed for flutter/flutter/177084, because - The status or check suite Mac web_tool_tests has failed. Please fix the issues identified (or deflake) before re-applying this label. |
flutter-dashboard
bot
removed
the
autosubmit
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 3, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 3, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 3, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 3, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 3, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 4, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 4, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 4, 2025
engine-flutter-autoroll
added a commit
to engine-flutter-autoroll/packages
that referenced
this pull request
Nov 4, 2025
auto-submit bot
pushed a commit
to flutter/packages
that referenced
this pull request
Nov 4, 2025
Roll Flutter from 027f2e410241 to e5d5c01850f2 (73 revisions) flutter/flutter@027f2e4...e5d5c01 2025-11-04 [email protected] [web] Upgrade Chrome to 141 (for engine tests) (flutter/flutter#177743) 2025-11-04 [email protected] Replace deprecated withOpacity in `chip_animation_style.0.dart` example (flutter/flutter#177834) 2025-11-04 [email protected] Roll Skia from 03612114a36d to c89b6118266b (1 revision) (flutter/flutter#177991) 2025-11-04 [email protected] [web] Delete unused futurize util (flutter/flutter#177861) 2025-11-04 [email protected] Roll Skia from 1a179581af75 to 03612114a36d (1 revision) (flutter/flutter#177984) 2025-11-04 [email protected] Roll Skia from 150f844e83fb to 1a179581af75 (3 revisions) (flutter/flutter#177979) 2025-11-04 [email protected] Roll Dart SDK from 6f1bd8d05b1d to 156bf665dba4 (2 revisions) (flutter/flutter#177976) 2025-11-04 [email protected] Roll Skia from 3990fc40acdf to 150f844e83fb (1 revision) (flutter/flutter#177964) 2025-11-04 [email protected] Roll Skia from 85adfd3b8e75 to 3990fc40acdf (1 revision) (flutter/flutter#177962) 2025-11-04 [email protected] Fix `isHeif` crash (flutter/flutter#177944) 2025-11-04 [email protected] Roll Dart SDK from ac065fcd782e to 6f1bd8d05b1d (1 revision) (flutter/flutter#177955) 2025-11-04 [email protected] Roll Skia from 001516d132f0 to 85adfd3b8e75 (4 revisions) (flutter/flutter#177958) 2025-11-04 [email protected] [ Widget Preview ] Add analytic event that's reported when the previewer is opened (flutter/flutter#177949) 2025-11-04 [email protected] Marks Linux_pixel_7pro dynamic_path_stroke_tessellation_perf__timeline_summary to be unflaky (flutter/flutter#171144) 2025-11-03 [email protected] Roll Skia from da9b8fb01101 to 001516d132f0 (6 revisions) (flutter/flutter#177951) 2025-11-03 [email protected] Add FAQ entry about our attempts to remove Skia image codecs. (flutter/flutter#177947) 2025-11-03 [email protected] Add blockAccessibilityFocus flag (flutter/flutter#175551) 2025-11-03 [email protected] Make sure that a SnackBarAction doesn't crash in 0x0 environment (flutter/flutter#177899) 2025-11-03 [email protected] Make sure that a SelectionArea doesn't crash in 0x0 environment (flutter/flutter#177876) 2025-11-03 [email protected] Speculative fix for android_verified_input_test (flutter/flutter#177937) 2025-11-03 [email protected] [skia] Explicitly disable XPS backend (flutter/flutter#177050) 2025-11-03 [email protected] Roll Dart SDK from 2d3aa1d5cb9f to ac065fcd782e (2 revisions) (flutter/flutter#177927) 2025-11-03 [email protected] Improve Impeller's docs in the top-level docs folder (flutter/flutter#177848) 2025-11-03 [email protected] Make sure that GridTile doesn't crash in 0x0 environment (flutter/flutter#175321) 2025-11-03 [email protected] Make sure that a Slider doesn't crash in 0x0 environment (flutter/flutter#177882) 2025-11-03 [email protected] fix(impeller): fix params to glDiscardFrameBufferEXT (flutter/flutter#175589) 2025-11-03 [email protected] Roll Skia from 56a10bf56ee0 to da9b8fb01101 (5 revisions) (flutter/flutter#177928) 2025-11-03 [email protected] wires up set application locale to web engine (flutter/flutter#177284) 2025-11-03 [email protected] [Android 16] Update `linux_android_emu_unstable` to use avd rev 7 (flutter/flutter#177854) 2025-11-03 [email protected] Make sure that a CheckedPopupMenuItem doesn't crash in 0x0 environment (flutter/flutter#177545) 2025-11-03 [email protected] Roll Fuchsia Linux SDK from Ynp3qiXocK8WLTjlb... to vxK5obzfr1X9P2kSh... (flutter/flutter#177917) 2025-11-03 [email protected] Update pubspec.yaml.tmpl build version tracker on line 5 (flutter/flutter#173600) 2025-11-03 [email protected] [Impeller] Fix the source rectangle used when rendering an AtlasContents with the strict mode for nine-patch images (flutter/flutter#177860) 2025-11-03 [email protected] docs: Default Splash / Loading screen for web app in index.html (flutter/flutter#177084) 2025-11-03 [email protected] Roll Skia from 25e1e4e96980 to 56a10bf56ee0 (6 revisions) (flutter/flutter#177910) 2025-11-03 [email protected] Make sure that a PopupMenuItem doesn't crash in 0x0 environment (flutter/flutter#177533) 2025-11-03 [email protected] Make sure that a RefreshProgressIndicator doesn't crash in 0x0 enviro… (flutter/flutter#177556) 2025-11-03 [email protected] Make sure that a PopupMenuButton doesn't crash in 0x0 environment (flutter/flutter#177493) 2025-11-03 [email protected] Make sure that a CircularProgressIndicator doesn't crash in 0x0 envir… (flutter/flutter#177555) 2025-11-02 [email protected] Make sure that a Radio doesn't crash in 0x0 environment (flutter/flutter#177580) 2025-11-02 [email protected] Make sure that a RadioListTile doesn't crash in 0x0 environment (flutter/flutter#177576) 2025-11-02 [email protected] Make sure that an ExpandIcon doesn't crash in 0x0 envrionment (flutter/flutter#175042) 2025-11-02 [email protected] Make sure that a RangeSlider doesn't crash in 0x0 environment (flutter/flutter#177642) 2025-11-02 [email protected] Make sure that a GridTileBar doesn't crash in 0x0 environment (flutter/flutter#177546) 2025-11-02 [email protected] Make sure that a LinearProgressIndicator doesn't crash in 0x0 environ… (flutter/flutter#177553) 2025-11-02 [email protected] Make sure that a PopupMenuDivider doesn't crash in 0x0 environment (flutter/flutter#177445) ...
IvoneDjaja
pushed a commit
to IvoneDjaja/flutter
that referenced
this pull request
Nov 22, 2025
…ter#177084) Contributes to flutter#102178 First I wanted to cherry-pick flutter/gallery#630. But then I noticed that there already exists a documentation: https://docs.flutter.dev/platform-integration/web/initialization. As most users won't expect this to be customizable (as myself), I wrote a little docs in the index.html.tmpl that link to this page. https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator I still think a default splash screen should be in place, e.g. by providing the `flutter_bootstrap.js` by default (?) ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
reidbaker
pushed a commit
to AbdeMohlbi/flutter
that referenced
this pull request
Dec 10, 2025
…ter#177084) Contributes to flutter#102178 First I wanted to cherry-pick flutter/gallery#630. But then I noticed that there already exists a documentation: https://docs.flutter.dev/platform-integration/web/initialization. As most users won't expect this to be customizable (as myself), I wrote a little docs in the index.html.tmpl that link to this page. https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator I still think a default splash screen should be in place, e.g. by providing the `flutter_bootstrap.js` by default (?) ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Contributes to #102178
First I wanted to cherry-pick flutter/gallery#630. But then I noticed that there already exists a documentation: https://docs.flutter.dev/platform-integration/web/initialization.
As most users won't expect this to be customizable (as myself), I wrote a little docs in the index.html.tmpl that link to this page.
https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator
I still think a default splash screen should be in place, e.g. by providing the
flutter_bootstrap.jsby default (?)Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.