macbook loading screen

2,508 alqsdeus

Remix Open In Editor Fullscreen Discuss Publish Your Code

macbook loading screen

Recommended

22 July 2025

CSS Loading Icon Spinner

26 September 2025

CSS Loading Animation with Background Image

28 September 2026

Fullscreen Game Embed Wrapper in HTML and JavaScript

HTML

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.loading-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.apple-logo {
    width: 60px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.loading-bar-container {
    width: 140px;
    height: 4px;
    background-color: #666;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
    display: block;
}

.loading-bar {
    width: 0;
    height: 100%;
    background-color: white;
}

.replay-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #f0f0f5;
    border: none;
    border-radius: 20px;
    color: black;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.replay-btn:hover {
    background-color: #e0e0eb;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.show-replay {
    opacity: 1;
    pointer-events: all;
}

JS

const loadingBar = document.querySelector('.loading-bar');
const replayBtn = document.querySelector('.replay-btn');
let progress = 0;
let interval;

function resetAndStartLoading() {
    loadingBar.style.width = '0%';
    progress = 0;
    replayBtn.classList.remove('show-replay');
    startLoading();
}

function startLoading() {
    let loading = true;

function loadWithPauses() {
        if (loading) {
            progress += Math.random() * 3;
            loadingBar.style.width = progress + '%';

if (progress >= 100) {
                progress = 100;
                clearInterval(interval);
                replayBtn.classList.add('show-replay');
            }

if (Math.random() > 0.8) {
                loading = false;
                setTimeout(() => { loading = true; }, Math.random() * 1500 + 500);
            }
        }
    }

interval = setInterval(loadWithPauses, 100);
}

startLoading();

replayBtn.addEventListener('click', () => {
    resetAndStartLoading();
});