Add loader

public/loading/Loader.jsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+const Loader = function(props) {
+  return (
+    <span className="o-loader">
+      <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" className="o-loader__image">
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(1 1)" strokeWidth="2">
+            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+              <path id="test" d="M36 18c0-9.94-8.06-18-18-18">
+            </path>
+          </g>
+        </g>
+      </svg>
+    </span>
+  );
+}
+
+export default Loader;

public/section/video/VideoSection.jsx

@@ -24,6 +24,7 @@
 import React from 'react';
 import Section from './../Section';
 import Video from './../../video/Video';
+import Loader from './../../loading/Loader';
 
 class VideoSection extends React.Component {
   constructor(props) {
@@ -40,7 +41,6 @@ class VideoSection extends React.Component {
           fill
           sources={ this.props.sources ? this.props.sources : this.props }
         />
-
         { this.props.children }
       </Section>
     );

public/styles/index.scss

@@ -51,6 +51,7 @@
 @import './objects/main.scss';
 
 @import './objects/_app.scss';
+@import './objects/_loader.scss';
 @import './objects/_navbar.scss';
 @import './objects/_video.scss';
 

public/styles/objects/_loader.scss

@@ -0,0 +1,32 @@
+/*
+ *  Loader
+ *    Styles for the animated loader.
+ *
+ *  Dependencies:
+ *    styles/tools/_transform.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/08
+ */
+.o-loader {
+  display: block;
+  width: 32px;
+  height: 32px;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  @include t-translate(-50%, -50%);
+
+  &__image {
+    animation-name: k-loader;
+    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+    animation-iteration-count: infinite;
+    animation-duration: 1s;
+    width: 100%;
+    height: 100%;
+    > * {
+      stroke: $s-color--loader;
+    }
+  }
+}

public/styles/settings/colors.scss

@@ -30,3 +30,6 @@ $s-color--navbar__text: white;
 $s-color--navbar__text-hover: #CCC;
 $s-color--navbar__bar-hover: $s-color--pastel-blue;
 $s-color--navbar__bar-active: $s-color--pastel-green;
+
+//loader
+$s-color--loader: #CCC;

public/video/Video.jsx

@@ -22,6 +22,7 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import Loader from './../loading/Loader';
 
 //Adjust the order to adjust the load position
 const VALID_SOURCES = [
@@ -46,7 +47,7 @@ class Video extends React.Component {
     for(let i = 0; i < VALID_SOURCES.length; i++) {
       let s = VALID_SOURCES[i];
       if(!sourceProps[s]) continue;
-      sources.push(<source type={"video/"+s} src={sourceProps[s]} key={s} />);
+      //sources.push(<source type={"video/"+s} src={sourceProps[s]} key={s} />);
     }
 
     //Classes
@@ -76,6 +77,9 @@ class Video extends React.Component {
           { sources }
         </video>
 
+        {/* Loader */}
+        <Loader />
+
         { /* Fallback Picture */ }
         { fallback }
       </div>