Hugging Face's logo

Spaces:
Mooshie
/
devops-portfolio
Running

App Files Community
devops-portfolio
File size: 2,522 Bytes 
ec87762
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
class CustomPreloader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        :host.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .preloader-content {
            text-align: center;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 3px solid #262626;
            border-top-color: #EAB308;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 1.5rem auto;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-family: 'Fira Code', monospace;
            color: #EAB308;
            font-size: 0.9rem;
            letter-spacing: 2px;
        }

        .progress-bar {
            width: 200px;
            height: 2px;
            background: #262626;
            margin: 1rem auto 0;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #EAB308;
            width: 0;
            transition: width 0.3s ease;
        }
      </style>
      
      <div class="preloader-content">
        <div class="loader"></div>
        <div class="loading-text">LOADING</div>
        <div class="progress-bar">
            <div class="progress-fill" id="progress-fill"></div>
        </div>
      </div>
    `;

    // Simulate loading progress
    const progressFill = this.shadowRoot.getElementById('progress-fill');
    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 30;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);
        setTimeout(() => {
          this.classList.add('hidden');
          document.body.style.overflow = 'auto';
        }, 300);
      }
      progressFill.style.width = `${progress}%`;
    }, 200);

    // Prevent scroll while loading
    document.body.style.overflow = 'hidden';
  }
}
customElements.define('custom-preloader', CustomPreloader);