Add files via upload

Author: ErikaXGH

app/2015YTm.css

@@ -0,0 +1 @@
+https://codepen.io/mrrocks/pen/ExLovj

app/2015ytm.js

@@ -0,0 +1,67 @@
+/* Original source: https://codepen.io/mrrocks/pen/ExLovj */
+/* This version of the CSS has been modified slightly */
+
+/* Here is where the magic happens */
+
+.spinner-container {
+     width: fit-content;
+     width: -webkit-fit-content;
+     margin: 10px auto;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+}
+.spinner-container.full-height {
+     height: calc(100vh - 76px);
+     display: flex;
+     align-items: center;
+}
+.spinner-container.full-height[hidden] {
+     display: none;
+}
+
+.spinner {
+  /* animation: rotator var(--duration) linear infinite; */
+  animation: rotator 1.4s linear infinite;
+  --offset: 187;
+  --duration: 1.4s;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+.spinner .path {
+  /* stroke-dasharray: var(--offset); */
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  stroke: #068fd4;
+  animation:
+    /* dash var(--duration) ease-in-out infinite; */
+    dash 1.4s ease-in-out infinite;
+    /* colors (var(--duration)*4) ease-in-out infinite; */
+}
+
+@keyframes colors {
+	0% { stroke: #4285F4; }
+	25% { stroke: #DE3E35; }
+	50% { stroke: #F7C223; }
+	75% { stroke: #1B9A59; }
+  100% { stroke: #4285F4; }
+}
+
+@keyframes dash {
+ 0% { /* stroke-dashoffset: var(--offset); */
+stroke-dashoffset: 187; }
+ 50% {
+   stroke-dashoffset: 46.75;
+   transform:rotate(135deg);
+ }
+ 100% {
+   /* stroke-dashoffset: var(--offset); */
+   stroke-dashoffset: 187;
+   transform:rotate(450deg);
+ }
+}

app/Material Spinner/Source.txt

@@ -0,0 +1,21 @@
+function spinner() {
+  var spinner = document.createElement("div");
+  spinner.classList.add("spinner-container");
+  if (localStorage.getItem("WEB_IOS_SPINNER") == "true") {
+    spinner.innerHTML = `
+    <svg class="spinner" width="30px" height="30px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="7" stroke-linecap="spuare" cx="33" cy="33" r="30"></circle>
+    </svg>
+    `;
+  } else {
+    spinner.innerHTML = `
+    <svg class="spinner" width="45px" height="45px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="6" stroke-linecap="spuare" cx="33" cy="33" r="30"></circle>
+    </svg>
+    `;
+  }
+  spinnerParent.appendChild(spinner);
+  if (spinnerParent === document.querySelector("#app")) {
+  spinner.classList.add("full-height");
+  }
+}