Merge pull request #992 from OpenTechFund/feature/otf-loading-icon

Add otf loading icon

opentech/static_src/src/app/src/components/LoadingPanel/index.js

 import React from 'react'
 
+import OTFLoadingIcon from '@components/OTFLoadingIcon'
+
 import './styles.scss';
 
-const LoadingIcon = () => {
-  return (
-      <div className="loading-panel">
-          <h5>Loading...</h5>
-          <div className="loading-panel__icon" />
-      </div>
-  )
+const LoadingPanel = () => {
+    return (
+        <div className="loading-panel">
+            <div className="loading-panel__text" >
+                <h5>Loading...</h5>
+            </div>
+            <div className="loading-panel__icon" >
+                <OTFLoadingIcon />
+            </div>
+        </div>
+    )
 }
 
-export default LoadingIcon
+export default LoadingPanel

opentech/static_src/src/app/src/components/LoadingPanel/styles.scss

@@ -2,40 +2,16 @@
     text-align: center;
     padding: 20px;
 
-    &__icon {
-        font-size: 10px;
-        margin: 20px auto;
-        text-indent: -9999em;
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background: linear-gradient(to right, $color--dark-grey 10%, transparent 42%);
-        position: relative;
-        animation: spin .4s infinite linear;
-        transform: translateZ(0);
-
-        &::after {
-            background: $color--white;
-            width: 75%;
-            height: 75%;
-            border-radius: 50%;
-            content: '';
-            margin: auto;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
+    &__text {
+        width: 100%;
+    }
 
-            100% {
-                transform: rotate(360deg);
-            }
+    &__icon {
+        width: 100%;
+        svg {
+            width: 80px;
+            height: 80px;
         }
     }
+
 }

opentech/static_src/src/app/src/components/OTFLoadingIcon/index.js

+import React from 'react'
+
+import './styles.scss'
+
+
+const OTFLoadingIcon = () => (
+    <svg className="logo-loading" viewBox="0 0 45 40">
+        <g fillRule="nonzero" fill="none">
+            <rect className="logo-part logo-part-1" fill="#25AAE1" width='5' height='5' transform='translate(10 0)' />
+            <rect className="logo-part logo-part-2" fill="#25AAE1" width='5' height='5' transform='translate(5 5)' />
+            <rect className="logo-part logo-part-3" fill="#25AAE1" width='5' height='5' transform='translate(0 10)' />
+            <rect className="logo-part logo-part-4" fill="#25AAE1" width='5' height='5' transform='translate(0 15)' />
+            <rect className="logo-part logo-part-5" fill="#25AAE1" width='5' height='5' transform='translate(0 20)' />
+            <rect className="logo-part logo-part-6" fill="#25AAE1" width='5' height='5' transform='translate(0 25)' />
+            <rect className="logo-part logo-part-7" fill="#25AAE1" width='5' height='5' transform='translate(5 30)' />
+            <rect className="logo-part logo-part-8" fill="#25AAE1" width='5' height='5' transform='translate(10 35)' />
+            <rect className="logo-part logo-part-9" fill="#25AAE1" width='5' height='5' transform='translate(30 0)' />
+            <rect className="logo-part logo-part-10" fill="#25AAE1" width='5' height='5' transform='translate(35 5)' />
+            <rect className="logo-part logo-part-11" fill="#25AAE1" width='5' height='5' transform='translate(40 10)' />
+            <rect className="logo-part logo-part-12" fill="#25AAE1" width='5' height='5' transform='translate(40 15)' />
+            <rect className="logo-part logo-part-13" fill="#25AAE1" width='5' height='5' transform='translate(40 20)' />
+            <rect className="logo-part logo-part-14" fill="#25AAE1" width='5' height='5' transform='translate(40 25)' />
+            <rect className="logo-part logo-part-15" fill="#25AAE1" width='5' height='5' transform='translate(35 30)' />
+            <rect className="logo-part logo-part-16" fill="#25AAE1" width='5' height='5' transform='translate(30 35)' />
+        </g>
+    </svg>
+)
+
+export default OTFLoadingIcon;

opentech/static_src/src/app/src/components/OTFLoadingIcon/styles.scss

+.logo-loading {
+    @keyframes fade-in-out {
+        0% {opacity: 1}
+        80%, 100% {opacity: 0.15}
+    }
+
+   .logo-part {
+        animation: fade-in-out .8s ease-out infinite;
+        opacity: 0.15;
+
+        &-1, &-16 {animation-delay: 0s}
+        &-2, &-15 {animation-delay: .1s}
+        &-3, &-14 {animation-delay: .2s}
+        &-4, &-13 {animation-delay: .3s}
+        &-5, &-12 {animation-delay: .4s}
+        &-6, &-11 {animation-delay: .5s}
+        &-7, &-10 {animation-delay: .6s}
+        &-8, &-9 {animation-delay: .7s}
+    }
+
+}