From 1478ee600f8e409eacee1a49ee30715e0fb58079 Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Sat, 9 Feb 2019 12:53:32 +0000
Subject: [PATCH] Add otf loading icon
---
.../app/src/components/LoadingPanel/index.js | 22 ++++++----
.../src/components/LoadingPanel/styles.scss | 42 ++++---------------
.../src/components/OTFLoadingIcon/index.js | 29 +++++++++++++
.../src/components/OTFLoadingIcon/styles.scss | 21 ++++++++++
4 files changed, 73 insertions(+), 41 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/OTFLoadingIcon/index.js
create mode 100644 opentech/static_src/src/app/src/components/OTFLoadingIcon/styles.scss
diff --git a/opentech/static_src/src/app/src/components/LoadingPanel/index.js b/opentech/static_src/src/app/src/components/LoadingPanel/index.js
index cc263937a..795853300 100644
--- a/opentech/static_src/src/app/src/components/LoadingPanel/index.js
+++ b/opentech/static_src/src/app/src/components/LoadingPanel/index.js
@@ -1,14 +1,20 @@
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
diff --git a/opentech/static_src/src/app/src/components/LoadingPanel/styles.scss b/opentech/static_src/src/app/src/components/LoadingPanel/styles.scss
index 1a54f514d..621045e7f 100644
--- a/opentech/static_src/src/app/src/components/LoadingPanel/styles.scss
+++ b/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;
}
}
+
}
diff --git a/opentech/static_src/src/app/src/components/OTFLoadingIcon/index.js b/opentech/static_src/src/app/src/components/OTFLoadingIcon/index.js
new file mode 100644
index 000000000..1ee69b96b
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/OTFLoadingIcon/index.js
@@ -0,0 +1,29 @@
+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;
diff --git a/opentech/static_src/src/app/src/components/OTFLoadingIcon/styles.scss b/opentech/static_src/src/app/src/components/OTFLoadingIcon/styles.scss
new file mode 100644
index 000000000..9095ec59c
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/OTFLoadingIcon/styles.scss
@@ -0,0 +1,21 @@
+.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}
+ }
+
+}
--
GitLab