mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-06 08:22:24 +01:00
feature (loader): awesome loader on intial page load
This commit is contained in:
Mickael KERJEAN
parent
63670050ff
commit
c2361c105a
3 changed files with 330 additions and 3 deletions
|
|
@ -60,4 +60,4 @@ Filestash can be used in different settings:
|
|||
|
||||
# Credits
|
||||
- [Contributors](https://github.com/mickael-kerjean/filestash/graphs/contributors) and folks developing awesome libraries (libvips, libraw, ...)
|
||||
- Logo derived from the work of [ssnjrthegr8](https://github.com/ssnjrthegr8), Iconography from [flaticon](https://www.flaticon.com/), [fontawesome](https://fontawesome.com) and [material](https://material.io/icons/)
|
||||
- Logo derived from the work of [ssnjrthegr8](https://github.com/ssnjrthegr8), Iconography from [flaticon](https://www.flaticon.com/), [fontawesome](https://fontawesome.com) and [material](https://material.io/icons/), loader adapted from [Mr Alien](https://codepen.io/mr_alien/pen/FDLjg)
|
||||
|
|
|
|||
|
|
@ -33,7 +33,268 @@
|
|||
$style = document.querySelector("style");
|
||||
$style.innerText = $style.innerText.replace("#f2f3f5", "#9AD1ED")
|
||||
}
|
||||
window.initTime = new Date();
|
||||
window.setTimeout(function(){
|
||||
var $loader = document.querySelector(".index-loader");
|
||||
if($loader) $loader.removeAttribute("style");
|
||||
}, 2000);
|
||||
</script>
|
||||
<div class="index-loader" style="display:none">
|
||||
<div class="guy">
|
||||
<span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="base">
|
||||
<span></span>
|
||||
<div class="face"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="longfazers">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.guy {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-left: -50px;
|
||||
left: 40%;
|
||||
animation: speeder 1s linear infinite;
|
||||
}
|
||||
.guy > span {
|
||||
height: 5px;
|
||||
width: 35px;
|
||||
background: #626466;
|
||||
position: absolute;
|
||||
top: -19px;
|
||||
left: 60px;
|
||||
border-radius: 2px 10px 1px 0;
|
||||
}
|
||||
|
||||
.base span {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid transparent;
|
||||
border-right: 100px solid #626466;
|
||||
border-bottom: 6px solid transparent;
|
||||
}
|
||||
.base span:before {
|
||||
content: "";
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
border-radius: 50%;
|
||||
background: #626466;
|
||||
position: absolute;
|
||||
right: -110px;
|
||||
top: -16px;
|
||||
}
|
||||
.base span:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 0 solid transparent;
|
||||
border-right: 55px solid #626466;
|
||||
border-bottom: 16px solid transparent;
|
||||
top: -16px;
|
||||
right: -98px;
|
||||
}
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 20px;
|
||||
background: #626466;
|
||||
border-radius: 20px 20px 0 0;
|
||||
transform: rotate(-40deg);
|
||||
right: -125px;
|
||||
top: -15px;
|
||||
}
|
||||
.face:after {
|
||||
content: "";
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background: #626466;
|
||||
right: 4px;
|
||||
top: 7px;
|
||||
position: absolute;
|
||||
transform: rotate(40deg);
|
||||
transform-origin: 50% 50%;
|
||||
border-radius: 0 0 0 2px;
|
||||
}
|
||||
|
||||
.guy > span > span:nth-child(1),
|
||||
.guy > span > span:nth-child(2),
|
||||
.guy > span > span:nth-child(3),
|
||||
.guy > span > span:nth-child(4) {
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: #626466;
|
||||
position: absolute;
|
||||
animation: fazer1 .2s linear infinite;
|
||||
}
|
||||
|
||||
.guy > span > span:nth-child(2) {
|
||||
top: 3px;
|
||||
animation: fazer2 .4s linear infinite;
|
||||
}
|
||||
|
||||
.guy > span > span:nth-child(3) {
|
||||
top: 1px;
|
||||
animation: fazer3 .4s linear infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.guy > span > span:nth-child(4) {
|
||||
top: 4px;
|
||||
animation: fazer4 1s linear infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
@keyframes fazer1 {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -80px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fazer2 {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fazer3 {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -50px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes fazer4 {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -150px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes speeder {
|
||||
0% {
|
||||
transform: translate(1px, 1px) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-1px, -1px) rotate(-1deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 0px) rotate(1deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(1px, 2px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-1px, 3px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-1px, 1px) rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(3px, 1px) rotate(-1deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-2px, -1px) rotate(1deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 1px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
.longfazers {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.longfazers span {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 20%;
|
||||
background: #626466;
|
||||
}
|
||||
.longfazers span:nth-child(1) {
|
||||
top: 20%;
|
||||
animation: lf .6s linear infinite;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
.longfazers span:nth-child(2) {
|
||||
top: 40%;
|
||||
animation: lf2 .8s linear infinite;
|
||||
animation-delay: -1s;
|
||||
}
|
||||
.longfazers span:nth-child(3) {
|
||||
top: 60%;
|
||||
animation: lf3 .6s linear infinite;
|
||||
}
|
||||
.longfazers span:nth-child(4) {
|
||||
top: 80%;
|
||||
animation: lf4 .5s linear infinite;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
@keyframes lf {
|
||||
0% {
|
||||
left: 200%;
|
||||
}
|
||||
100% {
|
||||
left: -200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes lf2 {
|
||||
0% {
|
||||
left: 200%;
|
||||
}
|
||||
100% {
|
||||
left: -200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes lf3 {
|
||||
0% {
|
||||
left: 200%;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes lf4 {
|
||||
0% {
|
||||
left: 200%;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<noscript>
|
||||
<div>
|
||||
<h2>Error: Javascript is off</h2>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,82 @@ import React from 'react';
|
|||
import ReactDOM from 'react-dom';
|
||||
import Router from './router';
|
||||
|
||||
import { Config } from "./model/"
|
||||
import { Config } from "./model/";
|
||||
|
||||
import './assets/css/reset.scss';
|
||||
|
||||
const $loader = document.querySelector(".index-loader");
|
||||
const $loader_guy = $loader.querySelector(".guy");
|
||||
const $loader_particules = $loader.querySelector(".longfazers");
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const className = 'ontouchstart' in window ? 'touch-yes' : 'touch-no';
|
||||
document.body.classList.add(className);
|
||||
|
||||
Config.refresh().then(() => {
|
||||
function render(){
|
||||
ReactDOM.render(<Router/>, document.getElementById('main'));
|
||||
return Promise.resolve();
|
||||
};
|
||||
function waitFor(n){
|
||||
return new Promise((done) => {
|
||||
window.setTimeout(() => {
|
||||
window.requestAnimationFrame(() => done());
|
||||
}, n);
|
||||
});
|
||||
}
|
||||
function removeLoaderWithAnimation(){
|
||||
if(!$loader) return Promise.resolve();
|
||||
if(!$loader.animate){
|
||||
$loader.remove();
|
||||
return Promise.resolve();
|
||||
}
|
||||
const moveTheGuy = () => {
|
||||
return new Promise((done) => {
|
||||
$loader_guy.animate([
|
||||
{ left: "40%", opacity: 1 },
|
||||
{ left: "110%", opacity: 0.5 }
|
||||
], {
|
||||
easing: "ease-out",
|
||||
duration: 1000,
|
||||
iterations: 1,
|
||||
}).onfinish = () => {
|
||||
done();
|
||||
};
|
||||
});
|
||||
};
|
||||
const FadeParticules = () => {
|
||||
return new Promise((done) => {
|
||||
$loader_particules.animate([
|
||||
{ opacity: 1 },
|
||||
{ opacity: 0 }
|
||||
], {
|
||||
duration: 500,
|
||||
iterations: 1,
|
||||
}).onfinish = () => {
|
||||
$loader_particules.remove();
|
||||
done();
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return Promise.all([moveTheGuy(), FadeParticules()]).then(() => {
|
||||
$loader.remove();
|
||||
});
|
||||
}
|
||||
function removeLoader(){
|
||||
if($loader) $loader.remove();
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
Config.refresh().then(() => {
|
||||
const timeSinceBoot = new Date() - window.initTime;
|
||||
if(timeSinceBoot >= 2000){
|
||||
const timeoutToAvoidFlickering = timeSinceBoot > 2500 ? 0 : 500;
|
||||
return waitFor(timeoutToAvoidFlickering)
|
||||
.then(removeLoaderWithAnimation)
|
||||
.then(render);
|
||||
}
|
||||
return removeLoader().then(render);
|
||||
});
|
||||
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue