Skip to content

Commit fc25b3c

Browse files
Matheus2212Matheus2212
committed
First upload and commit
1 parent 116b13b commit fc25b3c

File tree

4 files changed

+167
-0
lines changed

4 files changed

+167
-0
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
# js-simple-loader
2+
23
Simple Loader using Vanilla JS
4+
5+
## How to Use
6+
7+
Import the files on your page, and use:
8+
Loader.open()
9+
Loader.close()
10+
Loader.ifClosed()
11+
Loader.ifOpened()

‎index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Loader</title>
8+
<script src="loader.js"></script>
9+
<link rel="stylesheet" href="loader.css" />
10+
</head>
11+
<body></body>
12+
</html>

‎loader.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/*loader_website*/
2+
.loader_website {
3+
position: fixed;
4+
top: 0;
5+
left: 0px;
6+
z-index: 1100;
7+
width: 100%;
8+
height: 100%;
9+
background-color: rgba(0, 0, 0, 0.5);
10+
display: block;
11+
12+
-webkit-transition: ease-in-out 0.3s;
13+
-moz-transition: ease-in-out 0.3s;
14+
-o-transition: ease-in-out 0.3s;
15+
-ms-transition: ease-in-out 0.3s;
16+
transition: ease-in-out 0.3s;
17+
18+
-webkit-box-sizing: border-box;
19+
-moz-box-sizing: border-box;
20+
-o-box-sizing: border-box;
21+
-ms-box-sizing: border-box;
22+
box-sizing: border-box;
23+
}
24+
.loader_website * {
25+
-webkit-box-sizing: border-box;
26+
-moz-box-sizing: border-box;
27+
-o-box-sizing: border-box;
28+
-ms-box-sizing: border-box;
29+
box-sizing: border-box;
30+
}
31+
body.loader .loader_website span {
32+
top: 18%;
33+
}
34+
.loader_website > span {
35+
display: block;
36+
width: 48px;
37+
height: 48px;
38+
padding: 4px;
39+
background-color: #ffffff;
40+
-webkit-border-radius: 100%;
41+
-moz-border-radius: 100%;
42+
-o-border-radius: 100%;
43+
-ms-border-radius: 100%;
44+
border-radius: 100%;
45+
position: absolute;
46+
left: 50%;
47+
margin-left: -24px;
48+
top: -50px;
49+
50+
-webkit-transition: ease-in-out 0.3s;
51+
-moz-transition: ease-in-out 0.3s;
52+
-o-transition: ease-in-out 0.3s;
53+
-ms-transition: ease-in-out 0.3s;
54+
transition: ease-in-out 0.3s;
55+
56+
-webkit-box-shadow: #000 0px 5px 10px -5px;
57+
-moz-box-shadow: #000 0px 5px 10px -5px;
58+
-o-box-shadow: #000 0px 5px 10px -5px;
59+
-ms-box-shadow: #000 0px 5px 10px -5px;
60+
box-shadow: #000 0px 5px 10px -5px;
61+
}
62+
.loader_website > span > svg {
63+
fill: transparent;
64+
stroke: #563d7c;
65+
stroke-width: 5;
66+
animation: loader_dash 2s ease infinite, loader_rotate 2s linear infinite;
67+
}
68+
@keyframes loader_dash {
69+
0% {
70+
stroke-dasharray: 1, 95;
71+
stroke-dashoffset: 0;
72+
}
73+
50% {
74+
stroke-dasharray: 85, 95;
75+
stroke-dashoffset: -25;
76+
}
77+
100% {
78+
stroke-dasharray: 85, 95;
79+
stroke-dashoffset: -93;
80+
}
81+
}
82+
@keyframes loader_rotate {
83+
0% {
84+
transform: rotate(0deg);
85+
}
86+
100% {
87+
transform: rotate(360deg);
88+
}
89+
}
90+
/*loader_website*/

‎loader.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* Loader */
2+
var Loader = {
3+
loader: null,
4+
body: null,
5+
html: '<span><svg width="40" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="15"></svg></span>',
6+
cssClass: 'loader',
7+
open: function () {
8+
if (this.body == null) {
9+
this.body = document.getElementsByTagName('body')[0];
10+
}
11+
if (!this.isOpen()) {
12+
this.loader = document.createElement('div');
13+
this.loader.setAttribute('id', 'loader');
14+
this.loader.classList.add('loader_website');
15+
this.loader.innerHTML = this.html;
16+
this.body.append(this.loader);
17+
setTimeout(function () {
18+
Loader.body.classList.add(Loader.cssClass);
19+
}, 1);
20+
}
21+
return this;
22+
},
23+
close: function () {
24+
if (this.isOpen()) {
25+
this.body.classList.remove(this.cssClass);
26+
setTimeout(function () {
27+
Loader.loader.remove();
28+
}, 300);
29+
}
30+
return this;
31+
},
32+
isOpen: function () {
33+
return this.body.classList.contains(this.cssClass);
34+
},
35+
ifOpened: function (callback, close) {
36+
if (this.isOpen()) {
37+
if (!!close)
38+
this.close();
39+
if (typeof callback === 'function') {
40+
callback();
41+
}
42+
}
43+
return this;
44+
},
45+
ifClosed: function (callback, open) {
46+
if (!this.isOpen()) {
47+
if (!!open)
48+
this.open();
49+
if (typeof callback === 'function') {
50+
callback();
51+
}
52+
}
53+
return this;
54+
}
55+
};
56+
/* Loader */

0 commit comments

Comments
 (0)