Cargador de juegos HTML5 de People Playground

1,534 iroger7

Abrir en el editor Publica tu código

Cargador de juegos HTML5 de People Playground

Recomendado

28 August 2025

Formulario de inicio de sesión/registro (turco)

14 January 2026

Fragmento de cargador animado CSS

5 June 2025

icono de carga 5

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="https://cdn.jsdelivr.net/gh/bubbls/ugss@main/people-playground/">
    <title>people playground.</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="manifest" href="manifest.webmanifest">
    <style>
      #xp-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 260px;
        background: #ece9d8;
        border: 2px solid #3a6ea5;
        box-shadow: 0 0 0 3px #ffffff inset;
        font-family: Tahoma, sans-serif;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      #xp-loader-title {
        background: linear-gradient(#2b74c7, #1a4a9c);
        color: white;
        padding: 4px 8px;
        font-size: 14px;
      }
      #xp-loader-bar {
        width: 100%;
        height: 18px;
        border: 1px solid #3a6ea5;
        background: white;
        overflow: hidden;
      }
      #xp-loader-fill {
        width: 0%;
        height: 100%;
        background: #4a8be0;
      }
      #unity-loading-bar {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="xp-loader">
      <div id="xp-loader-title">Loading..</div>
      <div id="xp-loader-bar"><div id="xp-loader-fill"></div></div>
      <div id="xp-loader-text">0%</div>
    </div>

<div id="unity-container">
      <canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>
      <div id="unity-warning"></div>
    </div>
    <script>
      window.fileMergerConfig = {
        files: [
          { name: 'pggbog.data', parts: 7 },
          { name: 'pggbog.wasm', parts: 3 }
        ],
        basePath: 'Build/',
        debug: true
      };  
  </script>
  <script src="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/merge.js"></script>
    <script>
      window.addEventListener("load", function () {
        if ("serviceWorker" in navigator) {
          navigator.serviceWorker.register("ServiceWorker.js");
        }
      });

var canvas = document.querySelector("#unity-canvas");
      var xpBox = document.querySelector("#xp-loader");
      var xpFill = document.querySelector("#xp-loader-fill");
      var xpText = document.querySelector("#xp-loader-text");
      var warningBanner = document.querySelector("#unity-warning");

var buildUrl = "Build";
      var loaderUrl = buildUrl + "/pggbog.loader.js";
      var config = {
        dataUrl: buildUrl + "/pggbog.data",
        frameworkUrl: buildUrl + "/pggbog.framework.js",
        codeUrl: buildUrl + "/pggbog.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "Studio Minus",
        productName: "People Playground",
        productVersion: "1",
        showBanner: unityShowBanner
      };

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
      }

CSS