Skip to content

Commit 800a365

Browse files
vishal-pandeyvishal-pandey
committed
Loading Screen Added
1 parent 6ce99fa commit 800a365

File tree

3 files changed

+102
-1
lines changed

3 files changed

+102
-1
lines changed

‎app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ window.onload = async function () {
1313

1414
fillBoard(weights, bias);
1515

16+
document.querySelector(".loading").style.display = "none";
17+
1618
document.querySelector(".reset").addEventListener("click", function () {
1719
data = Array.from({ length: 784 }, () => 0);
1820
document.querySelector(".output").innerHTML = "";

‎index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
</head>
1111
<body>
1212

13+
<section class="loading">
14+
<div class="loading-icon"></div>
15+
<div class="loading-info">Please wait downloading weights....</div>
16+
</section>
1317
<section class="container">
1418
<section class="header">
1519
<h1>Deep Neural Network in pure JS <a href="https://github.com/vishal-pandey/deep-neural-network-javascript"><svg height="20" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">

‎style.css

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,4 +68,99 @@ body{
6868
padding: 10px 15px;
6969
width: 100%;
7070
border: 1px solid lightgrey;
71-
}
71+
}
72+
73+
.loading{
74+
width: 100%;
75+
height: 100%;
76+
position: absolute;
77+
background-color: white;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
flex-direction: column;
82+
font-size: 20px;
83+
color: grey;
84+
}
85+
86+
.loading-icon{
87+
box-sizing: border-box;
88+
width: 100px;
89+
height: 100px;
90+
border: 10px solid grey;
91+
border-radius: 50%;
92+
margin-bottom: 50px;
93+
position: relative;
94+
padding: 0;
95+
animation: spin 1s linear infinite;
96+
}
97+
98+
.loading-icon::before{
99+
box-sizing: border-box;
100+
content: '';
101+
position: absolute;
102+
transform-origin: 50% 50%;
103+
/* left: -10px; */
104+
/* top: -10px; */
105+
width: 100px;
106+
height: 100px;
107+
border: 10px solid rgb(91, 91, 91);
108+
border-radius: 50%;
109+
margin: 0;
110+
padding: 0;
111+
animation: spin 1s linear infinite;
112+
}
113+
114+
.loading-icon::after{
115+
box-sizing: border-box;
116+
content: '';
117+
position: absolute;
118+
transform-origin: 50% 50%;
119+
/* left: -10px; */
120+
/* top: -10px; */
121+
width: 100px;
122+
height: 100px;
123+
border: 10px solid rgb(80, 80, 80);
124+
border-radius: 50%;
125+
margin: 0;
126+
padding: 0;
127+
animation: spin1 1s linear infinite;
128+
}
129+
130+
131+
@keyframes spin {
132+
0% {
133+
left: 0px;
134+
top: 0px;
135+
/* transform: rotate(0deg); */
136+
}
137+
50% {
138+
left: -20px;
139+
top: -20px;
140+
/* transform: rotate(360deg); */
141+
}
142+
100% {
143+
left: 0px;
144+
top: 0px;
145+
/* transform: rotate(0deg); */
146+
}
147+
}
148+
149+
150+
@keyframes spin1 {
151+
0% {
152+
left: 0px;
153+
top: 0px;
154+
/* transform: rotate(0deg); */
155+
}
156+
50% {
157+
left: 10px;
158+
top: 10px;
159+
/* transform: rotate(360deg); */
160+
}
161+
100% {
162+
left: 0px;
163+
top: 0px;
164+
/* transform: rotate(0deg); */
165+
}
166+
}

0 commit comments

Comments
 (0)