diff --git a/examples/typescript/src/assets/css/index.css b/examples/typescript/src/assets/css/index.css index 67dac3f2..e189d172 100644 --- a/examples/typescript/src/assets/css/index.css +++ b/examples/typescript/src/assets/css/index.css @@ -20,81 +20,41 @@ text-align: center; } -#loadingOverlayAnimation { - width: 100%; - height: 100%; - position: absolute; +/* Loading spinner */ +.loading-spinner { + display: inline-block; + position: relative; } -#dropContainer { - width: 100%; - height: 100%; - animation: rain 5s linear infinite; +.loading-spinner div { + box-sizing: border-box; + display: block; position: absolute; + margin: 12.5%; + border: 1px solid var(--color2); + border-radius: 50%; + animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: var(--color2) transparent transparent transparent; } -/* Rain drops */ -drop { - position: absolute; - height: 20%; - background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color11) 100%); - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - overflow: hidden; +.loading-spinner div:nth-child(1) { + animation-delay: -0.45s; +} + +.loading-spinner div:nth-child(2) { + animation-delay: -0.3s; } -/* drop:nth-child(3n + 1) { - background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color9) 100%); +.loading-spinner div:nth-child(3) { + animation-delay: -0.15s; } -drop:nth-child(3n + 2) { - background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, var(--color10) 100%); -} */ -@keyframes rain { +@keyframes loading-spinner { 0% { - transform: translateY(-20%); + transform: rotate(0deg); } 100% { - transform: translateY(calc(100% + 20%)); + transform: rotate(360deg); } } - -/* Loading spinner */ -.loading-spinner { - display: inline-block; - position: relative; -} -.loading-spinner div { - box-sizing: border-box; - display: block; - position: absolute; - margin: 12.5%; - border: 1px solid var(--color2); - border-radius: 50%; - animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: var(--color2) transparent transparent transparent; -} -.loading-spinner div:nth-child(1) { - animation-delay: -0.45s; -} -.loading-spinner div:nth-child(2) { - animation-delay: -0.3s; -} -.loading-spinner div:nth-child(3) { - animation-delay: -0.15s; -} -@keyframes loading-spinner { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -#drophead { - background-color: var(--color11); - position: absolute; - top: 100%; -} \ No newline at end of file diff --git a/library/src/LoadingOverlay.ts b/library/src/LoadingOverlay.ts index f0f9b5aa..86067e31 100644 --- a/library/src/LoadingOverlay.ts +++ b/library/src/LoadingOverlay.ts @@ -1,11 +1,6 @@ import { TextOverlay } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.4'; export class LoadingOverlay extends TextOverlay { - maxDrops = 50; - maxSize = 5; - maxDuration = 5; - minDelay = -20; - rainDrops: Array = []; private static _rootElement: HTMLElement; private static _textElement: HTMLElement; @@ -66,46 +61,6 @@ export class LoadingOverlay extends TextOverlay { super(parentElem, LoadingOverlay.rootElement(), LoadingOverlay.textElement()); } - public animate() { - // Update the existing drops to have an increased speed - for (let raindrop of this.rainDrops) { - raindrop.element.setAttribute("style", "animation-duration:" + (1 + Math.random() * this.maxDuration) + "s;") - } - - let i = 0; - while (i < this.maxDrops) { - const dropContainer = document.createElement("div"); - dropContainer.id = "dropContainer"; - - const raindrop = new Raindrop(); - raindrop.size = Math.random() * this.maxSize + 0.2; - raindrop.delay = Math.random() * this.minDelay; - raindrop.duration = Math.random() * this.maxDuration; - raindrop.offsetLeft = Math.floor(Math.random() * LoadingOverlay.rootElement().clientWidth); - raindrop.element = dropContainer; - - - - const drop = document.createElement("drop"); - drop.setAttribute("style", "left: " + raindrop.offsetLeft + "px; width:" + raindrop.size + "px; overflow: visible;"); - dropContainer.setAttribute("style", "animation-delay:" + raindrop.delay + "s; animation-duration:" + (1 + raindrop.duration) + "s;"); - - const head = document.createElement("div"); - head.id = "drophead"; - raindrop.headsize = raindrop.size * 3; - head.setAttribute("style", "left: -" + raindrop.size + "px; width:" + raindrop.headsize + "px; height: " + raindrop.headsize + "px;"); - drop.appendChild(head); - - dropContainer.appendChild(drop); - LoadingOverlay.rootElement().append(dropContainer); - this.rainDrops.push(raindrop); - i++; - } - - this.maxDrops /= 1.5 - this.maxDuration /= 1.5; - } - /** * Update the text overlays inner text * @param text the update text to be inserted into the overlay @@ -122,12 +77,3 @@ export class LoadingOverlay extends TextOverlay { } } } - -class Raindrop { - size: number; - delay: number; - duration: number; - offsetLeft: number; - headsize: number; - element: HTMLElement; -} \ No newline at end of file diff --git a/library/src/SPSApplication.ts b/library/src/SPSApplication.ts index d225fa12..880e96c9 100644 --- a/library/src/SPSApplication.ts +++ b/library/src/SPSApplication.ts @@ -80,9 +80,6 @@ export class SPSApplication extends Application { this.loadingOverlay.show(); this.loadingOverlay.update(signallingResp); - // disable rain animation for now as perf is too poor on mobile devices - // this.loadingOverlay.animate(); - this.currentOverlay = this.loadingOverlay; }