macbook loading screen

Open In Editor Publish Your Code

macbook loading screen

Recommended

16 October 2025

CSS Animated Loading Element Example

23 September 2025

CSS Loading Animation HTML Snippet

24 July 2025

CSS Loading Animation Snippet

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();
});