Skip to content

Commit 3ddc6ea

Browse files
magdielcardosomagdielcardoso
committed
Modulo: Demo Loading
1 parent f07b8fa commit 3ddc6ea

File tree

1 file changed

+288
-0
lines changed

1 file changed

+288
-0
lines changed

‎examples/demo-loading.html‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Modern Loading Screen</title>
7+
<style>
8+
:root {
9+
--primary: #4361ee;
10+
--success: #10b981;
11+
--background: #f8fafc;
12+
--text: #1e293b;
13+
--border: #e2e8f0;
14+
}
15+
16+
body,
17+
html {
18+
margin: 0;
19+
padding: 0;
20+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
21+
Roboto, sans-serif;
22+
background-color: var(--background);
23+
color: var(--text);
24+
height: 100%;
25+
width: 100%;
26+
}
27+
28+
#loadingContainer {
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
background-color: var(--background);
39+
transition: opacity 0.5s ease;
40+
z-index: 9999;
41+
}
42+
43+
.loading-content {
44+
width: 90%;
45+
max-width: 500px;
46+
text-align: center;
47+
}
48+
49+
.logo-container {
50+
margin-bottom: 2rem;
51+
max-width: 180px;
52+
margin-left: auto;
53+
margin-right: auto;
54+
}
55+
56+
.logo {
57+
width: 100%;
58+
height: auto;
59+
}
60+
61+
.loading-title {
62+
font-size: 1.5rem;
63+
font-weight: 600;
64+
margin-bottom: 1.5rem;
65+
color: var(--text);
66+
}
67+
68+
.loading-description {
69+
font-size: 0.95rem;
70+
color: var(--text);
71+
opacity: 0.8;
72+
margin-top: -0.5rem;
73+
margin-bottom: 1.5rem;
74+
}
75+
76+
.progress-container {
77+
width: 100%;
78+
height: 8px;
79+
background-color: var(--border);
80+
border-radius: 20px;
81+
overflow: hidden;
82+
margin-bottom: 2rem;
83+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
84+
}
85+
86+
#progressBar {
87+
height: 100%;
88+
width: 0%;
89+
background: linear-gradient(90deg, var(--primary), #6366f1);
90+
border-radius: 20px;
91+
transition: width 0.1s ease;
92+
}
93+
94+
.steps-container {
95+
display: flex;
96+
justify-content: space-between;
97+
width: 100%;
98+
margin-top: 0.5rem;
99+
position: relative;
100+
}
101+
102+
.steps-line {
103+
position: absolute;
104+
top: 16px;
105+
left: 0;
106+
width: 100%;
107+
height: 2px;
108+
background-color: var(--border);
109+
z-index: 1;
110+
}
111+
112+
.step {
113+
display: flex;
114+
flex-direction: column;
115+
align-items: center;
116+
position: relative;
117+
z-index: 2;
118+
}
119+
120+
.step-icon {
121+
width: 32px;
122+
height: 32px;
123+
border-radius: 50%;
124+
background-color: var(--background);
125+
border: 2px solid var(--border);
126+
display: flex;
127+
align-items: center;
128+
justify-content: center;
129+
margin-bottom: 0.5rem;
130+
color: var(--border);
131+
transition: all 0.3s ease;
132+
}
133+
134+
.step-label {
135+
font-size: 0.875rem;
136+
font-weight: 500;
137+
color: var(--text);
138+
opacity: 0.7;
139+
transition: all 0.3s ease;
140+
}
141+
142+
.step.active .step-icon {
143+
border-color: var(--primary);
144+
color: var(--primary);
145+
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
146+
}
147+
148+
.step.active .step-label {
149+
opacity: 1;
150+
color: var(--primary);
151+
}
152+
153+
.step.completed .step-icon {
154+
background-color: var(--success);
155+
border-color: var(--success);
156+
color: white;
157+
}
158+
159+
.step.completed .step-label {
160+
opacity: 1;
161+
color: var(--success);
162+
}
163+
164+
@media (prefers-color-scheme: dark) {
165+
:root {
166+
--background: #111827;
167+
--text: #f1f5f9;
168+
--border: #334155;
169+
}
170+
}
171+
</style>
172+
</head>
173+
<body>
174+
<div id="loadingContainer">
175+
<div class="loading-content">
176+
<div class="logo-container">
177+
<img
178+
src="https://kanbanparachatwoot.com.br/wp-content/uploads/2025/02/image-5-114.png"
179+
alt="Logo"
180+
class="logo"
181+
/>
182+
</div>
183+
<h1 class="loading-title">Carregando</h1>
184+
<p class="loading-description">
185+
Preparando a demonstração do Kanban para Chatwoot. Por favor,
186+
aguarde...
187+
</p>
188+
<div class="progress-container">
189+
<div id="progressBar"></div>
190+
</div>
191+
<div class="steps-container">
192+
<div class="steps-line"></div>
193+
<div class="step">
194+
<div class="step-icon">1</div>
195+
<div class="step-label">Inicialização</div>
196+
</div>
197+
<div class="step">
198+
<div class="step-icon">2</div>
199+
<div class="step-label">Recursos</div>
200+
</div>
201+
<div class="step">
202+
<div class="step-icon">3</div>
203+
<div class="step-label">Validação</div>
204+
</div>
205+
<div class="step">
206+
<div class="step-icon">4</div>
207+
<div class="step-label">Conclusão</div>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
213+
<script data-name="Loading">
214+
document.addEventListener("DOMContentLoaded", function () {
215+
const progressBar = document.getElementById("progressBar");
216+
const steps = document.querySelectorAll(".step");
217+
const container = document.getElementById("loadingContainer");
218+
let currentStep = 0;
219+
let progress = 0;
220+
221+
// Update progress bar
222+
function updateProgress() {
223+
progress += 1;
224+
progressBar.style.width = `${progress}%`;
225+
226+
if (progress >= 100) {
227+
clearInterval(progressInterval);
228+
}
229+
}
230+
231+
// Update steps
232+
function updateSteps() {
233+
if (currentStep >= steps.length) {
234+
clearInterval(stepInterval);
235+
return;
236+
}
237+
238+
steps.forEach((step, index) => {
239+
if (index === currentStep) {
240+
step.classList.add("active");
241+
} else if (index < currentStep) {
242+
step.classList.add("completed");
243+
const icon = step.querySelector(".step-icon");
244+
icon.innerHTML = `
245+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
246+
<path d="M20 6L9 17l-5-5"/>
247+
</svg>
248+
`;
249+
}
250+
});
251+
252+
currentStep++;
253+
}
254+
255+
// Start intervals
256+
const progressInterval = setInterval(updateProgress, 50);
257+
const stepInterval = setInterval(updateSteps, 1250);
258+
259+
// Hide after 5 seconds
260+
setTimeout(() => {
261+
container.style.opacity = "0";
262+
setTimeout(() => {
263+
// Remover todas as classes e estilos adicionados
264+
steps.forEach((step) => {
265+
step.classList.remove("active", "completed");
266+
const icon = step.querySelector(".step-icon");
267+
// Restaurar o número original do ícone
268+
if (icon.textContent === "") {
269+
const stepIndex = Array.from(steps).indexOf(step) + 1;
270+
icon.innerHTML = stepIndex;
271+
}
272+
});
273+
274+
// Remover a barra de progresso
275+
progressBar.style.width = "0%";
276+
277+
// Esconder o container
278+
container.style.display = "none";
279+
280+
// Remover o listener para evitar vazamento de memória
281+
clearInterval(progressInterval);
282+
clearInterval(stepInterval);
283+
}, 500);
284+
}, 5000);
285+
});
286+
</script>
287+
</body>
288+
</html>

0 commit comments

Comments
 (0)