diff --git a/public/loading/Loader.jsx b/public/loading/Loader.jsx
new file mode 100644
index 0000000..6e2595f
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default Loader;
diff --git a/public/section/video/VideoSection.jsx b/public/section/video/VideoSection.jsx
index 16e78d6..3a5c6e6 100644
--- a/public/section/video/VideoSection.jsx
+++ b/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 }
);
diff --git a/public/styles/index.scss b/public/styles/index.scss
index a544849..473172a 100644
--- a/public/styles/index.scss
+++ b/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';
diff --git a/public/styles/objects/_loader.scss b/public/styles/objects/_loader.scss
new file mode 100644
index 0000000..32ac142
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/public/styles/settings/colors.scss b/public/styles/settings/colors.scss
index 29a6541..c2d41a2 100644
--- a/public/styles/settings/colors.scss
+++ b/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;
diff --git a/public/video/Video.jsx b/public/video/Video.jsx
index 3bdbb1a..7efc8ee 100644
--- a/public/video/Video.jsx
+++ b/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();
+ //sources.push();
}
//Classes
@@ -76,6 +77,9 @@ class Video extends React.Component {
{ sources }
+ {/* Loader */}
+
+
{ /* Fallback Picture */ }
{ fallback }