Initial commit.

2019-03-21 09:57:27 +01:00
parent 9893d5de24
commit 80317c5026
1907 changed files with 502783 additions and 0 deletions
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Progress</title>
+
+    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../../css/doctest.css">
+
+    <script src="../3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../3rdparty/all.js"></script>
+
+    <script src="../all.js"></script>
+    <script src="./all.js"></script>
+</head>
+<body onload="Doctest.run()">
+    <h1>Progress</h1>
+    <p>
+        A progress bar can be used to show a user how far along he/she is in a process.
+    </p>
+
+    <h2>Example 1</h2>
+    <p>Let's look at the progress bar example:</p><br />
+    <canvas id="canvas" class="interactive"></canvas>
+    <p>
+        What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
+    </p>
+    <script class="doctest">
+const app = new PIXIApp({
+    view: canvas,
+    width: 900,
+    height: 250,
+    transparent: false
+}).setup().run()
+
+let progress1 = new Progress({
+    app: app
+})
+
+app.scene.addChild(progress1)
+
+setTimeout(() => progress1.progress = 10, 500)
+setTimeout(() => progress1.progress = 20, 800)
+setTimeout(() => progress1.progress = 50, 900)
+setTimeout(() => progress1.progress = 80, 1500)
+setTimeout(() => progress1.progress = 100, 1700)
+    </script>
+
+    <h2>Example 2</h2>
+    <canvas id="canvas2" class="interactive"></canvas>
+    <p>
+        What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
+    </p>
+    <script class="doctest">
+const app2 = new PIXIApp({
+    view: canvas2,
+    width: 900,
+    height: 250,
+    transparent: false,
+    progress: {
+        height: 20,
+        fillActive: 0xe7bc51,
+        margin: 200
+    }
+}).setup().run()
+
+setTimeout(() => app2.progress(10), 1000)
+setTimeout(() => app2.progress(30), 2000)
+setTimeout(() => app2.progress(35), 2300)
+setTimeout(() => app2.progress(50), 2800)
+setTimeout(() => app2.progress(60), 3500)
+setTimeout(() => app2.progress(90), 4500)
+setTimeout(() => app2.progress(100), 5000)
+    </script>
+</body>