Skip to content

Commit b3c6d81

Browse files
FraganyaFraganya
committed
initial mvp
0 parents  commit b3c6d81

9 files changed

Lines changed: 91 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea/

‎example/images/1.jpg‎

1.03 MB
Loading

‎example/images/2.jpg‎

3.22 MB
Loading

‎example/images/3.jpg‎

1.6 MB
Loading

‎example/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Impression Example</title>
6+
7+
<link rel="stylesheet" href="../impression.css">
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
width: 100%;
13+
min-height: 100vh;
14+
font-family: 'Roboto', sans-serif;
15+
}
16+
17+
.container {
18+
width: 100%;
19+
padding: 4em 4em;
20+
margin-top: 10em;
21+
}
22+
23+
.img-row {
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
}
28+
29+
img {
30+
width: 20em;
31+
height: auto;
32+
margin: 2em 1em;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="container">
38+
<div id="loader">
39+
<div id="loader-default">
40+
</div>
41+
</div>
42+
<h1 style="text-align: center">Impression Preloader Test</h1>
43+
<div class="img-row">
44+
<img src="images/1.jpg" alt="">
45+
<img src="images/2.jpg" alt="">
46+
<img src="images/3.jpg" alt="">
47+
</div>
48+
</div>
49+
50+
<script src="../impression.js"></script>
51+
</body>
52+
</html>

‎img/default.gif‎

6.64 KB
Loading

‎img/infinity.gif‎

57.4 KB
Loading

‎impression.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#loader {
2+
position: fixed;
3+
z-index: 99;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
background-color: rgba(0, 0, 0, 0.9);
9+
color: #fff;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
#loader.hidden {
16+
animation: fadePageOut 1s;
17+
animation-fill-mode: forwards;
18+
}
19+
20+
#loader-default {
21+
content: url('./img/default.gif');
22+
}
23+
24+
#loader-infinity {
25+
content: url('./img/infinity.gif');
26+
}
27+
@keyframes fadePageOut {
28+
100% {
29+
opacity: 0;
30+
visibility: hidden;
31+
}
32+
33+
34+
}

‎impression.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
window.addEventListener('load', function () {
2+
const loader = document.querySelector('#loader');
3+
loader.className += " hidden";
4+
});

0 commit comments

Comments
 (0)