From 20834dec3f88257cac48705238399919c0ffa3fb Mon Sep 17 00:00:00 2001
From: STAM <stam@epicm.org>
Date: Fri, 23 Mar 2018 16:39:57 +0300
Subject: [PATCH] preloader

---
 README.md               |  7 +++++--
 src/assets/css/hero.css | 14 ++++++++++++++
 src/assets/img/oval.svg | 17 +++++++++++++++++
 src/assets/js/bulma.js  |  2 ++
 src/index.html          |  4 ++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/img/oval.svg

diff --git a/README.md b/README.md
index ef9542b..6ae6baa 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,11 @@ Site's repo for [Metamod-r](https://github.com/theAsmodai/metamod-r) project.
 [![license](https://img.shields.io/github/license/EpicMorg/metamod-r.org.svg?longCache=true&style=flat-square)](https://github.com/EpicMorg/metamod-r.org/blob/master/LICENSE) [![Gitter](https://img.shields.io/gitter/room/metamod-r-org/metamod-r-org.svg?style=flat-square)](https://gitter.im/metamod-r-org)
 
 ### Dependencies
-[![CSS](https://img.shields.io/badge/css--framework-bulma.io-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/jgthms/bulma) [![Template](https://img.shields.io/badge/Template-bulma.io--Hero-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/dansup/bulma-templates) [![Font](https://img.shields.io/badge/Icons-Font%20Awesome%205.8.0-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/FortAwesome/Font-Awesome) 
+[![CSS](https://img.shields.io/badge/css--framework-bulma.io-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/jgthms/bulma) [![Template](https://img.shields.io/badge/Template-Hero-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/dansup/bulma-templates) [![Font](https://img.shields.io/badge/Icons-Font%20Awesome%205.8.0-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/FortAwesome/Font-Awesome) 
+
+https://github.com/SamHerbert/SVG-Loaders
 
 #### Freepik's Icons
 
-Icons made by [Freepik](http://www.freepik.com") from [Flaticon](https://www.flaticon.com) is licensed by [Creative Commons BY 3.0 CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/).
\ No newline at end of file
+Icons made by [Freepik](http://www.freepik.com") from [Flaticon](https://www.flaticon.com) is licensed by [Creative Commons BY 3.0 CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/).
+
diff --git a/src/assets/css/hero.css b/src/assets/css/hero.css
index 6aef75f..4502517 100644
--- a/src/assets/css/hero.css
+++ b/src/assets/css/hero.css
@@ -50,4 +50,18 @@ html,body {
   display: flex;
   justify-content: center;
   flex-direction: column;
+}
+#hellopreloader>p{
+  display:none;
+}
+#hellopreloader_preload{
+  display: block;position: fixed;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 1000px;
+  background: #59ABE3 url('/assets/img/oval.svg') center center no-repeat;
+  background-size:63px;
 }
\ No newline at end of file
diff --git a/src/assets/img/oval.svg b/src/assets/img/oval.svg
new file mode 100644
index 0000000..004a356
--- /dev/null
+++ b/src/assets/img/oval.svg
@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/js/bulma.js b/src/assets/js/bulma.js
index 328fd46..f48deb8 100644
--- a/src/assets/js/bulma.js
+++ b/src/assets/js/bulma.js
@@ -7,4 +7,6 @@
         burger.classList.toggle('is-active');
         menu.classList.toggle('is-active');
     });
+    var hellopreloader = document.getElementById("hellopreloader_preload");
+    function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};
 })();
diff --git a/src/index.html b/src/index.html
index 3c28b23..20ea522 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,10 @@
 </head>
 <body>
 
+	<div id="hellopreloader">
+		<div id="hellopreloader_preload"></div>
+	</div>
+
   <section class="hero is-info is-medium is-bold">
     <div class="hero-head">
       <nav class="navbar">