Skip to content

Commit 3643856

Browse files
jstolpejstolpe
committed
simple loader
1 parent 0d339b6 commit 3643856

2 files changed

Lines changed: 80 additions & 0 deletions

File tree

‎simple_loader/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Simple Loader HTML, CSS, and JavaScript
6+
</title>
7+
<style>
8+
body {
9+
padding: 0;
10+
margin: 0;
11+
font-family: 'Helvetica';
12+
}
13+
14+
#loading_container {
15+
display: none;
16+
}
17+
18+
.loading-overlay {
19+
background: rgba( 26, 26, 26, 0.6 );
20+
position: fixed;
21+
width: 100%;
22+
height: 100%;
23+
top: 0;
24+
z-index: 1;
25+
}
26+
27+
.loader-container {
28+
position: fixed;
29+
top: 50%;
30+
left: 50%;
31+
transform: translate( -50%, -50% );
32+
z-index: 2;
33+
}
34+
35+
.loader-container img {
36+
height: 50px;
37+
width: 50px;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<h1>
43+
Simple Loader
44+
</h1>
45+
<h2>
46+
HTML, CSS, JavaScript
47+
</h2>
48+
<div id="loading_container">
49+
<div class="loading-overlay">
50+
51+
</div>
52+
<div class="loader-container">
53+
<img src="loader.gif" />
54+
</div>
55+
</div>
56+
<a id="test_loader" href="#">
57+
Test Simple Loader
58+
</a>
59+
<p>
60+
Clicking test will show the loader for 1 second and then hide it again.
61+
</p>
62+
<script>
63+
document.getElementById( 'test_loader' ).addEventListener( 'click', function() {
64+
showLoader();
65+
66+
setTimeout( function() {
67+
hideLoader();
68+
}, 1000 );
69+
} );
70+
71+
function showLoader() {
72+
document.getElementById( 'loading_container' ).style.display = 'block';
73+
}
74+
75+
function hideLoader() {
76+
document.getElementById( 'loading_container' ).style.display = 'none';
77+
}
78+
</script>
79+
</body>
80+
</html>

‎simple_loader/loader.gif‎

44.3 KB
Loading

0 commit comments

Comments
 (0)