Adding fadeout to preload screen

Technical Q&A

Topic summary

A developer is attempting to implement a fadeout transition for their preload screen instead of having it disappear abruptly.

Current Issue:

  • The existing code shows a preloader implementation with mobile detection and timing logic
  • The code appears corrupted or improperly formatted (text is reversed/garbled in places)
  • None of the attempted solutions have worked so far

Technical Context:

  • Uses vanilla JavaScript with getElementById to target the preloader element
  • Includes mobile device detection via user agent checking
  • Implements interval-based timing logic (appears to involve opacity changes at specific loading thresholds)

Status: The question remains unanswered with no solutions or suggestions provided yet. The developer is seeking assistance to achieve a smooth fadeout effect.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi, Im trying to add a fadeout as opposed to an abrupt ending to my preload screen. Can’t get anything to work. Can anyone help?

( function() { var preload = document.getElementById("preloader"); var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); var loading = 0; var id = setInterval(frame, 30); function frame() { if(loading == 70) { clearInterval(id); } else { loading = loading + 1; if(! isMobile) { if(loading == 60) { preload.style.opacity = "0"; preload.style.display = "none"; }