PullToRefresh: use iOS style spinner

2021-12-02 15:03:52 -06:00 · 2021-12-02 15:03:52 -06:00 · d6bc8d8b6c
commit d6bc8d8b6c
parent c57d50aa4e
3 changed files with 111 additions and 0 deletions
--- a/app/soapbox/components/loading_spinner.js
+++ b/app/soapbox/components/loading_spinner.js
--- a/app/soapbox/components/pull_to_refresh.js
+++ b/app/soapbox/components/pull_to_refresh.js
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@ -229,3 +229,114 @@
 .ptr__children {
  overflow: visible !important;
 }
+
+.ptr .lds-spinner {
+  width: 40px;
+  height: 40px;
+}
+
+.ptr__pull-down {
+  transform: translateY(10px);
+}
+
+/**
+ * iOS style loading spinner.
+ * Adapted from: https://loading.io/css/
+ * With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
+ */
+.lds-spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+  div {
+    position: absolute;
+    transform-origin: 50% 50%;
+    animation: lds-spinner 1.2s linear infinite;
+    width: 100%;
+    height: 100%;
+
+    &::after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 3.75%;
+      left: 46.25%;
+      width: 7.5%;
+      height: 22.5%;
+      border-radius: 20%;
+      background: var(--primary-text-color);
+    }
+
+    &:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+
+    &:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+
+    &:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+
+    &:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+
+    &:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+
+    &:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+
+    &:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+
+    &:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+
+    &:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+
+    &:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+  }
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}