✨ Add web page to display during the wasm bundle
This commit is contained in:
191
public/assets/index.css
Normal file
191
public/assets/index.css
Normal file
@@ -0,0 +1,191 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes multicolor {
|
||||
0% { fill: #1DB2CF; /* color-primary-100 */ }
|
||||
33% { fill: #7E6BB6; /* color-secondary-100 */ }
|
||||
66% { fill: #D53583; /* color-ternary-100 */ }
|
||||
}
|
||||
|
||||
:root {
|
||||
--wallpaper-pattern-height: 128px;
|
||||
--spinner-height: calc(32px * 2);
|
||||
--window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
|
||||
}
|
||||
|
||||
/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
|
||||
@media (min-height: 0px) and (max-height: 640px) {
|
||||
:root {
|
||||
--spinner-top: var(--window-center-pos);
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
|
||||
@media (min-height: 640px) and (max-height: 768px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 1));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
|
||||
@media (min-height: 768px) and (max-height: 1024px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
|
||||
@media (min-height: 1024px) and (max-height: 1280px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
|
||||
@media (min-height: 1280px) and (max-height: 1536px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
|
||||
@media (min-height: 1536px) and (max-height: 1792px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
|
||||
@media (min-height: 1792px) and (max-height: 2048px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
|
||||
@media (min-height: 2048px) and (max-height: 2304px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
|
||||
@media (min-height: 2304px) and (max-height: 2560px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
|
||||
@media (min-height: 2560px) and (max-height: 2816px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
|
||||
@media (min-height: 2816px) and (max-height: 3072px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
|
||||
@media (min-height: 3072px) and (max-height: 3328px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
|
||||
@media (min-height: 3328px) and (max-height: 3584px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
|
||||
@media (min-height: 3584px) and (max-height: 3840px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
|
||||
@media (min-height: 3840px) and (max-height: 4096px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
|
||||
@media (min-height: 4096px) and (max-height: 4352px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
|
||||
@media (min-height: 4352px) and (max-height: 4608px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
|
||||
@media (min-height: 4608px) and (max-height: 4864px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
|
||||
}
|
||||
}
|
||||
/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
|
||||
@media (min-height: 4864px) and (max-height: 5120px) {
|
||||
:root {
|
||||
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.wallpaper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
background-image: url("../images/wallpaper-pattern.svg");
|
||||
background-position: center;
|
||||
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
height: 5%;
|
||||
aspect-ratio: 2;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: var(--spinner-top);
|
||||
|
||||
svg {
|
||||
--fps: 4;
|
||||
--duration_sec: 3;
|
||||
--steps: calc(var(--duration_sec) * var(--fps));
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
fill: #1DB2CF; /* color-primary-100 */
|
||||
stroke: #1B1B1B; /* greyscale-90 */
|
||||
|
||||
animation: 3s multicolor linear infinite;
|
||||
animation-timing-function: steps(var(--steps), end);
|
||||
}
|
||||
}
|
||||
}
|
||||
53
public/index.html
Normal file
53
public/index.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Hack to avoid the addition of the script part by dioxus-cli -->
|
||||
<!-- <title>{base_path}</title> -->
|
||||
<!-- <title>{app_name}</title> -->
|
||||
|
||||
<title></title>
|
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8" />
|
||||
{style_include}
|
||||
{script_include}
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="preloader" class="loader">
|
||||
<div class="wallpaper">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
<div class="spinner">
|
||||
<svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
stroke-linejoin="round"
|
||||
stroke-width="6"
|
||||
d="M121.208 2 2 57.011l70.927-.265L61.363 92 182 36.724h-69.498L121.208 2Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" async>
|
||||
import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
|
||||
|
||||
// Ensure that everything needed to render preloader has been downloaded
|
||||
// before fetching the app wasm bundle.
|
||||
window.onload=function() {
|
||||
init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
|
||||
wasm => {
|
||||
const preloader = document.getElementById("preloader");
|
||||
if (preloader !== undefined) {
|
||||
preloader.style.display = 'none';
|
||||
}
|
||||
|
||||
if (wasm.__wbindgen_start == undefined) {
|
||||
wasm.main();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user