reHLDS/metamod-r.org
2
0
Fork 0
mirror of https://github.com/rehlds/metamod-r.org.git synced 2025-01-13 05:47:54 +03:00
Code Issues Projects Releases Wiki Activity

preloader

Browse Source
This commit is contained in:
STAM 2018-03-23 16:39:57 +03:00
parent cce146e316
commit 20834dec3f
5 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -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) [![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 ### 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 #### 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/). 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/).

14
src/assets/css/hero.css
View File

@ -51,3 +51,17 @@ html,body {
justify-content: center; justify-content: center;
flex-direction: column; 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;
}

17
src/assets/img/oval.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

2
src/assets/js/bulma.js
View File

@ -7,4 +7,6 @@
burger.classList.toggle('is-active'); burger.classList.toggle('is-active');
menu.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);};
})(); })();

4
src/index.html
View File

@ -13,6 +13,10 @@
</head> </head>
<body> <body>
<div id="hellopreloader">
<div id="hellopreloader_preload"></div>
</div>
<section class="hero is-info is-medium is-bold"> <section class="hero is-info is-medium is-bold">
<div class="hero-head"> <div class="hero-head">
<nav class="navbar"> <nav class="navbar">