enpaul/allaroundhere.org
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add preloader functionality

Browse Source
This commit is contained in:
Ethan Paul 2021-01-31 18:58:33 -05:00
parent dde0f523a8
commit 8c13782ffb
No known key found for this signature in database
GPG Key ID: C5F5542B54A4D9C6
3 changed files with 81 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
css/style.css
View File

@ -46,7 +46,6 @@ a:hover {
padding: 1em; padding: 1em;
/* width: 40em; */
max-width: 90%; max-width: 90%;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border-style: solid; border-style: solid;
@ -142,3 +141,71 @@ ul.buttons li {
.footer { .footer {
font-size: 0.9em; font-size: 0.9em;
} }
.fadeout {
-webkit-animation: fadeout 0.25s linear 1;
-webkit-animation-fill-mode: forwards;
animation: fadeout 0.25s linear 1;
animation-fill-mode: both;
}
#preloader {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
background-color: black;
z-index: 100;
margin: 0;
position: fixed;
top: 0;
left: 0;
}
.spinner {
width: 140px;
height: 140px;
position: relative;
backface-visibility: hidden;
transform-origin: 0 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-image: url("https://cdn.enp.one/img/logos/aah-sm.jpg");
background-size: contain;
border-radius: 50%;
}
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 20px solid rgba(213, 213, 213, 0.7);
border-top-color: transparent;
border-radius: 50%;
animation: spinner 1.5s linear infinite;
top: 50%;
left: 50%;
box-sizing: content-box;
}
@-webkit-keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes spinner {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes spinner {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}

8
index.html
View File

@ -18,15 +18,19 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script type="text/javascript" src="js/custom.js"></script> <script type="text/javascript" src="js/custom.js"></script>
<noscript><style>.nojs {display: none;}</style></noscript>
</head> </head>
<body onload="setBackground()"> <body>
<div id="background-image"></div> <div id="background-image"></div>
<div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
<div id="content"> <div id="content">
<img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/> <img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/>
<h1>AllAroundHere</h1> <h1>All Around Here</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

9
js/custom.js
View File

@ -78,7 +78,7 @@ function selectBackground() {
} }
function setBackground() { window.addEventListener("DOMContentLoaded", function () {
let selected = selectBackground() let selected = selectBackground()
document.getElementById( document.getElementById(
@ -92,4 +92,9 @@ function setBackground() {
document.getElementById( document.getElementById(
"background-info-link" "background-info-link"
).href = selected.source; ).href = selected.source;
} });
window.addEventListener("load", function () {
document.getElementById("preloader").classList.add("fadeout");
});