How to Make a Fake Update Screen With HTML, CSS and JavaScript

Updated October 8, 2026 · 6 min read · By the Hacker Typer team

A fake update screen is a blue page, a spinning circle and a number that counts up slowly. This tutorial gives you the whole thing as one file you can copy, and then explains how each part works so you can change it.

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Working on updates</title>
  <style>
    body {
      margin: 0; height: 100vh;
      background: #0078d7; color: #fff;
      font: 24px "Segoe UI", Arial, sans-serif;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; cursor: none;
    }
    .spinner {
      width: 50px; height: 50px; margin-bottom: 30px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff; border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="spinner"></div>
  <p>Working on updates <span id="percent">0</span>% complete.</p>
  <p>Don't turn off your computer. This will take a while.</p>

  <script>
    const minutes = 10;   // how long the fake update takes
    const percentText = document.getElementById("percent");
    let percent = 0;

    setInterval(function () {
      percent = percent < 100 ? percent + 1 : 0;   // start again after 100
      percentText.textContent = percent;
    }, minutes * 60 * 1000 / 100);

    // double-click anywhere to go full screen
    document.addEventListener("dblclick", function () {
      document.documentElement.requestFullscreen();
    });
  </script>
</body>
</html>

How to use this code

1. Get the file. Press Download above the code to save it as fake-update.html. Or press Copy code, paste it into a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac, or a code editor such as VS Code) and save it as fake-update.html. The name must end in .html, not .txt.
2. Open it. Double-click the file. It opens in your web browser and starts working straight away.
3. Change it. Open the same file in the text editor, edit something, save, and refresh the browser page to see the result.

Nothing needs to be installed, and the file works without an internet connection.

Double-click the page to go full screen. Press Esc to leave.

How the code works

Centring everything

The four display: flex lines in the body style are a standard recipe for putting content in the exact middle of the page. flex-direction: column stacks the items top to bottom, align-items centres them left to right, and justify-content centres them up and down.

The spinner

The spinner is an empty box turned into a circle with border-radius: 50%. Its border is faint all the way round, except the top edge, which is solid white. The animation line rotates the whole circle once a second, so the white part appears to chase round.

The percentage

• <span id="percent"> marks the one piece of text that will change.
• setInterval runs a function again and again with a pause in between.
• The pause is minutes * 60 * 1000 / 100. That is the total time in milliseconds divided into 100 steps, so the number reaches 100 exactly when the time is up.
• percent < 100 ? percent + 1 : 0 means: if it is under 100, add one; otherwise go back to zero. The update never finishes.

Full screen

Browsers only allow full screen after the user does something, such as a click. That is why the code waits for a double-click before calling requestFullscreen(). cursor: none hides the mouse pointer, which a real update screen would not show.

Easy changes to try

Use it kindly

Someone who believes the update is real may hold the power button and lose unsaved work. Stay nearby, reveal the joke quickly, and never use a fake screen to get someone to call a number or pay for anything. More ideas are in harmless computer pranks.