From b15a0af0ccb9e0405bc0e6cb3cb42d4d91ca35ae Mon Sep 17 00:00:00 2001
From: equilet <2237372+equilet@users.noreply.github.com>
Date: Mon, 3 Apr 2023 17:02:31 -0700
Subject: [PATCH] updated to alpha revision as PoC

---
 index.html | 11 ++++++++++-
 player.js  |  2 +-
 style.css  | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 2a90c3b..f26437a 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,16 @@
 		</div>
 		
 		<div id="c-bottom">
-
+			<div id="swirly">
+				<div id="loader2">
+				</div>
+				<svg id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340">
+					 <circle cx="170" cy="170" r="160" stroke="#E2007C"/>
+					 <circle cx="170" cy="170" r="135" stroke="#404041"/>
+					 <circle cx="170" cy="170" r="110" stroke="#E2007C"/>
+					 <circle cx="170" cy="170" r="85" stroke="#404041"/>
+				</svg>
+			</div>
 			<div class="player-frame-bottom" id="player-img">
 				<img src="SUTROFM-logo.png">
 			</div>
diff --git a/player.js b/player.js
index e7ff69f..a72fc7a 100644
--- a/player.js
+++ b/player.js
@@ -13,6 +13,7 @@ var desc, filename, image_url = new String;
 
 const audiostr = document.getElementById('player-widget');
 const btn = document.getElementById('button');
+
 btn.classList.add('play');
 let pressed = false;
 
@@ -27,7 +28,6 @@ btn.addEventListener('click', function() {
 		btn.classList.add('play');
 	      	btn.classList.remove('pause');
 		audiostr.pause();
-		
 	}
 	console.log('toggled:', pressed);
 });
diff --git a/style.css b/style.css
index de4dc04..f64eab5 100644
--- a/style.css
+++ b/style.css
@@ -54,9 +54,62 @@ p {
 	margin-right: 20px;
 }	
 
+#swirly {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	width: 50px;
+}
 
 /* ---------------------------------------------------------- */
+#loader {
+	display: flex;
+	max-width: 15rem;
+	width: 100%;
+	height: auto;
+	stroke-linecap: round;
+}
+#loader2 {
+	height: 200px;
+	width: 200px;
+	display: flex;
+}
+
+circle {
+	fill: none;
+	stroke-width: 3.5;
+	transform-origin: 170px 170px;
+	will-change: transform;
+	animation-name: preloader;
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-in-out;
+}
+circle .animate {
+}
+circle:nth-of-type(1) {
+	stroke-dasharray: 550px;
+	animation-delay: -0.15s;
+}
+circle:nth-of-type(2) {
+	stroke-dasharray: 500px;
+	animation-delay: -0.3s;
+}
+circle:nth-of-type(3) {
+	stroke-dasharray: 450px;
+	animation-delay: -0.45s;
+}
+circle:nth-of-type(4) {
+	stroke-dasharray: 300px;
+	animation-delay: -0.6s;
+}
+
+@keyframes preloader {
+	50% { transform: rotate(360deg); }
+}
 
+
+/* ---------------------------------------------------------- */
 .player-container {
 	margin: 10px;
 	padding: 30px;
-- 
2.34.1