updated to alpha revision as PoC

diff --git a/index.html b/index.html
index 2a90c3b3932619e5b00d55972ced9afb7bb6386b..f26437a54e7ec87410876bbce10c19c0b294f4a2 100644 (file)
--- 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 e7ff69f7102c3d969cb91e9b0dcaf6cbced642fb..a72fc7add138a0b20a29c6776b2e68f98068ae16 100644 (file)
--- 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 de4dc04b0a428ab064cb7f32b34a63e204c53743..f64eab577702e94adb5037dc582db2f1aeaea01b 100644 (file)
--- 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;