Merge pull request #34 from benweiser/add_loader

Adds a pure CSS loader IE10+ support
benweiser · Apr 13, 2018 · d7d8e89 · d7d8e89
2 parents 8a9dc11 + f2cfa2b
commit d7d8e89
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 15 deletions.
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import LazyLoad from "react-lazyload";
 import Img from "react-image";
-import ReactLoading from "react-loading";
+import { Loader } from "../atoms/Loader/Loader";
 
 export interface ImageProps {
   readonly alt: string;
@@ -21,7 +21,7 @@ const Image: React.SFC<ImageProps> = ({
           className={className}
           src={[src, "http://via.placeholder.com/350x350"]}
           alt={alt}
-          loader={<ReactLoading type={"bubbles"} color={"#ccc"} />}
+          loader={<Loader />}
         />
       </LazyLoad>
     </div>

diff --git a/src/components/Image/__snapshots__/Image.test.tsx.snap b/src/components/Image/__snapshots__/Image.test.tsx.snap
@@ -15,15 +15,7 @@ exports[`Image component renders correctly 1`] = `
       alt="al text"
       className="bw-img"
       decode={true}
-      loader={
-        <Loading
-          color="#ccc"
-          delay={1000}
-          height={64}
-          type="bubbles"
-          width={64}
-        />
-      }
+      loader={<Unknown />}
       src={
         Array [
           "logo.png",

diff --git a/src/components/atoms/Loader/Loader.tsx b/src/components/atoms/Loader/Loader.tsx
@@ -0,0 +1,101 @@
+import * as React from "react";
+import styled from "../../../styles/styled-components";
+
+interface LoaderProps {
+  readonly className?: string;
+}
+
+export const Loader: React.SFC<LoaderProps> = ({ className }: LoaderProps) => (
+  <StyledSpinner className={className}>
+    <div className="sk-circle1 sk-child" />
+    <div className="sk-circle2 sk-child" />
+    <div className="sk-circle3 sk-child" />
+    <div className="sk-circle4 sk-child" />
+    <div className="sk-circle5 sk-child" />
+    <div className="sk-circle6 sk-child" />
+    <div className="sk-circle7 sk-child" />
+    <div className="sk-circle8 sk-child" />
+    <div className="sk-circle9 sk-child" />
+    <div className="sk-circle10 sk-child" />
+    <div className="sk-circle11 sk-child" />
+    <div className="sk-circle12 sk-child" />
+  </StyledSpinner>
+);
+
+const StyledSpinner = styled.div`
+  margin: 40px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  .sk-child {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0; }
+  .sk-child:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #f8f8f8;
+    border-radius: 100%;
+            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
+   .sk-circle2 {
+            transform: rotate(30deg); }
+   .sk-circle3 {
+            transform: rotate(60deg); }
+   .sk-circle4 {
+            transform: rotate(90deg); }
+   .sk-circle5 {
+            transform: rotate(120deg); }
+   .sk-circle6 {
+            transform: rotate(150deg); }
+   .sk-circle7 {
+            transform: rotate(180deg); }
+   .sk-circle8 {
+            transform: rotate(210deg); }
+   .sk-circle9 {
+            transform: rotate(240deg); }
+   .sk-circle10 {
+            transform: rotate(270deg); }
+   .sk-circle11 {
+            transform: rotate(300deg); }
+   .sk-circle12 {
+            transform: rotate(330deg); }
+   .sk-circle2:before {
+            animation-delay: -1.1s; }
+   .sk-circle3:before {
+            animation-delay: -1s; }
+   .sk-circle4:before {
+            animation-delay: -0.9s; }
+   .sk-circle5:before {
+            animation-delay: -0.8s; }
+   .sk-circle6:before {
+            animation-delay: -0.7s; }
+   .sk-circle7:before {
+            animation-delay: -0.6s; }
+   .sk-circle8:before {
+            animation-delay: -0.5s; }
+   .sk-circle9:before {
+            animation-delay: -0.4s; }
+   .sk-circle10:before {
+            animation-delay: -0.3s; }
+  .sk-circle11:before {
+            animation-delay: -0.2s; }
+  .sk-circle12:before {
+            animation-delay: -0.1s; }
+
+@-webkit-keyframes sk-circleBounceDelay {
+  0%, 80%, 100% {
+            transform: scale(0); }
+  40% {
+            transform: scale(1); } }
+
+@keyframes sk-circleBounceDelay {
+  0%, 80%, 100% {
+            transform: scale(0); }
+  40% {
+            transform: scale(1); }
+`;
diff --git a/src/components/atoms/NavItem/NavItem.tsx b/src/components/atoms/NavItem/NavItem.tsx
@@ -11,7 +11,7 @@ interface NavItemProps {
   children?: React.ReactChild;
 }
 
-export const NavItem: React.StatelessComponent<NavItemProps> = ({
+export const NavItem: React.SFC<NavItemProps> = ({
   className,
   path,
   linkText,

diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
@@ -33,9 +33,9 @@ export const fontSizes: ReadonlyArray<number> = [
 export const breakpoints: ReadonlyArray<string> = ["680px", "900px", "1200px"];
 
 export interface ThemeInterface {
-  colors: ColorScheme;
-  breakpoints: ReadonlyArray<string>;
-  fontSizes: ReadonlyArray<number>;
+  readonly colors: ColorScheme;
+  readonly breakpoints: ReadonlyArray<string>;
+  readonly fontSizes: ReadonlyArray<number>;
 }
 
 export const theme: ThemeInterface = {