GFS
Global Food Solutions
01Primary Loading Screen
The "ta-dum" of GFS. This full-screen loading sequence runs on initial app load, post-login, and when switching between major modules. Scattered particles converge into the GFS globe, followed by the wordmark fade-in. Total duration: ~3 seconds.
Timing: Particle scatter (0-0.6s) — Convergence (0.6-2.0s) — Wordmark fade (2.2-3.0s)
Usage: Initial app launch, post-authentication redirect, major module transitions
Never: Use on page-to-page navigation or partial data loads
Usage: Initial app launch, post-authentication redirect, major module transitions
Never: Use on page-to-page navigation or partial data loads
02Minimal Loader
For fast secondary loads — switching tabs, refreshing a panel, or navigating between sub-pages. Clean white background with a small pulsing dot-matrix globe and the company name.
Global Food Solutions
Duration: Show for minimum 400ms, maximum 2s before fallback message
Usage: Tab switches, panel refreshes, sub-page navigation
Context: White backgrounds only — never on cobalt
Usage: Tab switches, panel refreshes, sub-page navigation
Context: White backgrounds only — never on cobalt
03Portal Splash
What users see after authenticating and before the portal loads. Cobalt gradient background, GFS wordmark, animated progress bar, and cold-chain-specific loading text. This is the first branded moment after login.
GFS.
Checking the cold chain...
Text rotation: "Checking the cold chain..." — "Syncing inventory data..." — "Connecting to NetSuite..." — "Almost ready..."
Progress: Animated fill, not percentage-based. Loops until load completes.
Rule: Never say "Loading..." — always use a GFS-specific action verb
Progress: Animated fill, not percentage-based. Loops until load completes.
Rule: Never say "Loading..." — always use a GFS-specific action verb
04Data Loading
For data-fetch states within the UI. Skeleton placeholders preserve layout structure while content loads. The shimmer gradient uses the GFS cobalt-to-alice color range, keeping the loading state on-brand.
Shimmer gradient: #F0F2F5 (Fog) → #E9F5FF (Alice) → #F0F2F5 (Fog)
Timing: 1.5s loop, ease-in-out. Stagger children by 0.1s-0.15s for wave effect.
Rule: Skeleton shapes must match the actual content layout. Never use generic placeholders.
Timing: 1.5s loop, ease-in-out. Stagger children by 0.1s-0.15s for wave effect.
Rule: Skeleton shapes must match the actual content layout. Never use generic placeholders.
05Mobile Splash
The mobile app splash screen shown on cold launch. GFS globe centered on cobalt with subtle expanding pulse rings. Minimal, confident, fast.
GFS
v4.2.1 build 891
Platform: iOS + Android — use native splash screen APIs where possible
Duration: 1-2s max, then transition to auth or home
Version: Always show build number in production. Helps field support.
Duration: 1-2s max, then transition to auth or home
Version: Always show build number in production. Helps field support.
06Micro Loaders
Six inline loading indicators for use within UI components — buttons, cards, chat interfaces, and data panels. All 24px base size, all in GFS blue.
Spinning Globe
24px — Buttons, inline actions
Dot-Matrix Pulse
24px — Status indicators
Typing Indicator
Chat, AI assistants
Progress Ring
24px — Upload, sync
Bar Sweep
80x4px — Table headers, cards
Braille Spinner
24px — Terminal, mono contexts
Color: All micro loaders use Tufts #468BE6 on light backgrounds, Jordy #93BFEF on dark.
Size: 24px default. Scale to 16px for compact UI, 32px for empty states.
Rule: Never combine multiple loader types in the same view. Pick one per context and stay consistent.
Size: 24px default. Scale to 16px for compact UI, 32px for empty states.
Rule: Never combine multiple loader types in the same view. Pick one per context and stay consistent.