Loading Spinner Feature

Relevant source files

The following files were used as context for generating this wiki page:

• css/spinload.css
• js/myJs.js
• index.html
• css/style.css
• img/cuteCat.jpg

The Loading Spinner Feature provides a full-screen transition overlay that appears when the application first loads. It masks the primary content and background elements until the initial initialization logic and assets are ready for display.

This feature ensures a smooth user experience by preventing the "flash of unstyled content" (FOUC) and indicating that the application is processing its initial setup.

Technical Architecture

The feature consists of a high-priority DOM overlay, a CSS-based animation engine, and a jQuery-controlled lifecycle manager.

DOM Structure

The preloader resides at the top level of the body within a .wrapper container. It uses a hierarchical structure where a main container hosts the animated spinner elements.

<div id="preloader">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

Sources: index.html:36-44

Visual Styles

The preloader uses fixed positioning to cover the entire viewport. It sets a high z-index of 9999999 to ensure it remains above all other UI components, including the background image and main content area.

Attribute	Value	Description
Background Color	#ef6a8a	The primary overlay color.
Position	fixed	Ensures the overlay stays locked to the viewport.
Z-Index	9999999	Forces the element to the top of the stack.
Spinner Width	50px	The horizontal size of the loading icon.

Sources: css/spinload.css:2-20

Initialization Lifecycle

The spinner's visibility is managed by a setTimeout function within the $(document).ready block. This ensures that the application has finished loading its core dependencies before revealing the UI.

Initialization Flow Diagram

The following diagram illustrates the transition from the loading state to the active application state.

The flow begins immediately upon document readiness, orchestrating the transition from the pink overlay to the content layer.
Sources: js/myJs.js:20-29

Lifecycle Event Sequence

The sequence below details the interaction between the jQuery document handler and the DOM elements.

Animation Mechanics

The spinner utilizes CSS @keyframes to create a rhythmic "stretching" effect. Each rectangular element within the spinner has a specific animation-delay to create a wave-like motion.

Keyframe Logic

The stretchdelay animation transforms the scaleY property of the rectangles.

1. 0%, 40%, 100%: The rectangle scales down to 0.4 of its height.
2. 20%: The rectangle scales up to its full height (1.0).

Sources: css/spinload.css:48-61

Delay Assignments

To achieve the wave effect, each rectangle is assigned a negative delay:

• rect2: -1.1s
• rect3: -1.0s
• rect4: -0.9s
• rect5: -0.8s

Sources: css/spinload.css:32-46

Content Transition

Once the preloader is removed, the application transitions to the main content area. The .content div, which is initially hidden by the firstQuestion function, is displayed with a 200ms animation.

Visibility Management

Element	Initial State	Post-Load State
#preloader	display: block	display: none (via fadeOut)
body	overflow: hidden (implied)	overflow: visible
.content	display: none	display: block (via show(200))

Sources: js/myJs.js:23-28, js/myJs.js:37-43, css/style.css:1-4

The Loading Spinner Feature ensures that users interact with a complete UI rather than observing the incremental loading of background images like img/puung3.jpg or text elements.
Sources: css/style.css:23, js/myJs.js:1-15