Gorilla Tag WebGL: Load & Play Online

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <base href="https://cdn.jsdelivr.net/gh/web-ports/gorilla-tag@latest/">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | gorilla tag web</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: #231F20;
        }

#unity-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
  </head>
  <body>
	<div id="loading-text" style="color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;"> LOADING... </div>
    <div id="unity-container" class="unity-desktop" hidden>
      <canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
    </div>
    <script>
        var loadingText = document.querySelector("#loading-text");
        let totalBytes = 0;
        let loadedBytes = 0;

async function fetchWithProgress(url) {
            const response = await fetch(url);
            const reader = response.body.getReader();
            let chunks = [];
            let received = 0;
            while (true) {
                const {
                    done,
                    value
                } = await reader.read();
                if (done) break;
                received += value.length;
                loadedBytes += value.length;
                chunks.push(value);
                let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
                let mbTotal = '150.89';
                loadingText.textContent = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
            }
            let fullBuffer = new Uint8Array(received);
            let offset = 0;
            for (let chunk of chunks) {
                fullBuffer.set(chunk, offset);
                offset += chunk.length;
            }
            return fullBuffer.buffer;
        }
        async function mergeFiles(fileParts, cacheKey) {
            const buffers = await Promise.all(
                fileParts.map(part => fetchWithProgress(part))
            );
            const mergedBlob = new Blob(buffers);
            return URL.createObjectURL(mergedBlob);
        }

};
            document.body.appendChild(script);
        })();
    </script>
  </body>
</html>

Gorilla Tag WebGL: Load & Play Online

Recommended

Loading Page HTML with Progress Bar

Staggered Blink Text Menu

macbook loading screen

HTML

CSS

JS

Recommended

Loading Page HTML with Progress Bar

Staggered Blink Text Menu

macbook loading screen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS