Free

Arch VR Loader – Slate Holographic

<div class="fp-architecture-vr-3d-environment-loading-ui">
    <div class="fp-architecture-vr-3d-environment-loading-ui-stage">
        
        <div class="fp-architecture-vr-3d-environment-loading-ui-bg"></div>

        <div class="fp-architecture-vr-3d-environment-loading-ui-card">
            
            <div class="fp-architecture-vr-3d-environment-loading-ui-header">
                <span class="fp-architecture-vr-3d-environment-loading-ui-title">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                        <line x1="12" y1="22.08" x2="12" y2="12"></line>
                    </svg>
                    Aero-Space
                </span>
                <span class="fp-architecture-vr-3d-environment-loading-ui-badge">VR LINK</span>
            </div>

            <div class="fp-architecture-vr-3d-environment-loading-ui-scene">
                <div class="fp-architecture-vr-3d-environment-loading-ui-holo-glow"></div>
                
                <div class="fp-architecture-vr-3d-environment-loading-ui-ring"></div>
                <div class="fp-architecture-vr-3d-environment-loading-ui-ring"></div>
                <div class="fp-architecture-vr-3d-environment-loading-ui-ring"></div>
                
                <div class="fp-architecture-vr-3d-environment-loading-ui-reticle"></div>
            </div>

            <div class="fp-architecture-vr-3d-environment-loading-ui-footer">
                <div class="fp-architecture-vr-3d-environment-loading-ui-status-row">
                    <span class="fp-architecture-vr-3d-environment-loading-ui-status-text" id="fp-architecture-vr-3d-environment-loading-ui-text">Initializing VR...</span>
                    <span class="fp-architecture-vr-3d-environment-loading-ui-pct" id="fp-architecture-vr-3d-environment-loading-ui-pct">0%</span>
                </div>
                <div class="fp-architecture-vr-3d-environment-loading-ui-track">
                    <div class="fp-architecture-vr-3d-environment-loading-ui-fill" id="fp-architecture-vr-3d-environment-loading-ui-bar"></div>
                </div>
            </div>

        </div>

    </div>
</div>

.fp-architecture-vr-3d-environment-loading-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;      
    --fp-secondary-color: #f8fafc;    
    --fp-muted-color: #475569;        
    --fp-soft-color: #e2e8f0;         
    --fp-background-color: transparent;

    --fp-info-color: #94a3b8;         
    --fp-warning-color: #cbd5e1;      
    --fp-danger-color: #1e293b;       
    --fp-accent-color: #64748b;       

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fp-muted-color);
    background-color: var(--fp-background-color);
    box-sizing: border-box;
}

.fp-architecture-vr-3d-environment-loading-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid var(--fp-soft-color);
    box-shadow: 0 10px 40px -10px rgba(71, 85, 105, 0.08);
}

.fp-architecture-vr-3d-environment-loading-ui-bg {
    position: absolute;
    inset: 0;
    background-size: 30px 30px;
    background-image: 
        linear-gradient(to right, var(--fp-secondary-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--fp-secondary-color) 1px, transparent 1px);
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
}

.fp-architecture-vr-3d-environment-loading-ui-card {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    max-width: 380px;
    max-height: 380px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 50px rgba(71, 85, 105, 0.05), inset 0 0 0 1px rgba(255,255,255,0.5);
    animation: fp-architecture-vr-3d-environment-loading-ui-breathe 6s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fp-architecture-vr-3d-environment-loading-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--fp-soft-color);
    padding-bottom: 12px;
}

.fp-architecture-vr-3d-environment-loading-ui-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fp-danger-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-architecture-vr-3d-environment-loading-ui-badge {
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.65rem;
    background: var(--fp-secondary-color);
    color: var(--fp-accent-color);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--fp-soft-color);
    letter-spacing: 0.05em;
}

.fp-architecture-vr-3d-environment-loading-ui-scene {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
    overflow: hidden;
    margin: 20px 0;
    border-radius: 8px;
    background: radial-gradient(circle at center, var(--fp-primary-color) 0%, var(--fp-secondary-color) 100%);
}

.fp-architecture-vr-3d-environment-loading-ui-holo-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    background: conic-gradient(from 0deg, var(--fp-primary-color), var(--fp-warning-color), var(--fp-accent-color), var(--fp-warning-color), var(--fp-primary-color));
    filter: blur(24px);
    opacity: 0.25;
    border-radius: 50%;
    animation: fp-architecture-vr-3d-environment-loading-ui-spin 4s linear infinite;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.fp-architecture-vr-3d-environment-loading-ui-ring {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid var(--fp-accent-color);
    box-shadow: 0 0 12px rgba(100, 116, 139, 0.2), inset 0 0 12px rgba(100, 116, 139, 0.2);
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: fp-architecture-vr-3d-environment-loading-ui-depth-loop 4.5s infinite linear;
}

.fp-architecture-vr-3d-environment-loading-ui-ring:nth-child(2) { animation-delay: -1.5s; }
.fp-architecture-vr-3d-environment-loading-ui-ring:nth-child(3) { animation-delay: -3s; }

.fp-architecture-vr-3d-environment-loading-ui-reticle {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.fp-architecture-vr-3d-environment-loading-ui-reticle::before,
.fp-architecture-vr-3d-environment-loading-ui-reticle::after {
    content: '';
    position: absolute;
    background: var(--fp-muted-color);
}
.fp-architecture-vr-3d-environment-loading-ui-reticle::before { width: 100%; height: 1px; }
.fp-architecture-vr-3d-environment-loading-ui-reticle::after { width: 1px; height: 100%; }

.fp-architecture-vr-3d-environment-loading-ui-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-architecture-vr-3d-environment-loading-ui-status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.fp-architecture-vr-3d-environment-loading-ui-status-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.fp-architecture-vr-3d-environment-loading-ui-pct {
    font-family: ui-monospace, "SFMono-Regular", monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fp-accent-color);
    transition: color 0.3s ease, transform 0.2s ease;
}

.fp-architecture-vr-3d-environment-loading-ui-track {
    width: 100%;
    height: 4px;
    background: var(--fp-soft-color);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.fp-architecture-vr-3d-environment-loading-ui-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    background: var(--fp-accent-color);
    transition: width 0.1s linear, background-color 0.3s ease;
    box-shadow: 0 0 8px var(--fp-accent-color);
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-card {
    border-color: var(--fp-accent-color);
    box-shadow: 0 25px 60px rgba(100, 116, 139, 0.15), inset 0 0 0 1px rgba(100, 116, 139, 0.2);
    transform: scale(1.02);
    animation: none; 
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-holo-glow {
    opacity: 0.6;
    filter: blur(30px);
    background: conic-gradient(from 0deg, var(--fp-primary-color), var(--fp-accent-color), var(--fp-danger-color), var(--fp-accent-color), var(--fp-primary-color));
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-ring {
    border-color: var(--fp-danger-color);
    box-shadow: 0 0 15px rgba(30, 41, 59, 0.4), inset 0 0 15px rgba(30, 41, 59, 0.4);
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-status-text {
    color: var(--fp-danger-color);
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-pct {
    color: var(--fp-danger-color);
    transform: scale(1.1);
}

.fp-architecture-vr-3d-environment-loading-ui.fp-is-surging .fp-architecture-vr-3d-environment-loading-ui-fill {
    background: var(--fp-danger-color);
    box-shadow: 0 0 12px var(--fp-danger-color);
}

@keyframes fp-architecture-vr-3d-environment-loading-ui-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fp-architecture-vr-3d-environment-loading-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-architecture-vr-3d-environment-loading-ui-depth-loop {
    0% { 
        transform: rotateX(65deg) translateZ(-80px) scale(0.4); 
        opacity: 0; 
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { 
        transform: rotateX(65deg) translateZ(120px) scale(1.8); 
        opacity: 0; 
    }
}

@media (max-width: 480px) {
    .fp-architecture-vr-3d-environment-loading-ui-stage { padding: 16px; border-radius: 12px;}
    .fp-architecture-vr-3d-environment-loading-ui-card { width: 100%; height: 100%; padding: 24px 16px; gap: 16px;}
    .fp-architecture-vr-3d-environment-loading-ui-ring { width: 110px; height: 110px; }
    .fp-architecture-vr-3d-environment-loading-ui-pct { font-size: 1rem; }
}

document.querySelectorAll('.fp-architecture-vr-3d-environment-loading-ui').forEach(root => {
    const textEl = root.querySelector('#fp-architecture-vr-3d-environment-loading-ui-text');
    const pctEl = root.querySelector('#fp-architecture-vr-3d-environment-loading-ui-pct');
    const barEl = root.querySelector('#fp-architecture-vr-3d-environment-loading-ui-bar');

    const phases = [
        'Initializing VR Core...',
        'Generating Topology...',
        'Mapping Textures...',
        'Computing Radiosity...',
        'Environment Ready'
    ];

    let progress = 0;
    let phaseIndex = 0;
    let surgeTimer = 0;
    
    let lastTime = performance.now();
    let animationFrameId;

    function fp_architecture_vr_3d_environment_loading_ui_loop(time) {
        if (document.visibilityState === "hidden") {
            lastTime = time;
            animationFrameId = requestAnimationFrame(fp_architecture_vr_3d_environment_loading_ui_loop);
            return;
        }

        let dt = time - lastTime;
        lastTime = time;

        let speedMultiplier = 1;
        if (progress > 30 && progress < 50) speedMultiplier = 0.5; 
        if (progress > 70 && progress < 90) speedMultiplier = 0.3; 
        if (progress > 95) speedMultiplier = 2; 

        progress += (dt / 1000) * 12 * speedMultiplier * (Math.random() * 0.4 + 0.8);

        if (progress > 105) { 
            progress = 0;
            phaseIndex = 0;
            if (textEl) textEl.textContent = phases[0];
        }

        let displayProgress = Math.min(100, Math.max(0, Math.floor(progress)));

        let newPhase = Math.min(4, Math.floor(displayProgress / 25));
        if (newPhase !== phaseIndex && displayProgress > 0 && displayProgress < 100) {
            phaseIndex = newPhase;
            if (textEl) textEl.textContent = phases[phaseIndex];
            
            root.classList.add('fp-is-surging');
            surgeTimer = 400; 
        } else if (displayProgress === 100 && phaseIndex !== 4) {
            phaseIndex = 4;
            if (textEl) textEl.textContent = phases[4];
            root.classList.add('fp-is-surging');
            surgeTimer = 800; 
        }

        if (surgeTimer > 0) {
            surgeTimer -= dt;
            if (surgeTimer <= 0) {
                root.classList.remove('fp-is-surging');
            }
        }

        if (pctEl) pctEl.textContent = `${displayProgress}%`;
        if (barEl) barEl.style.width = `${displayProgress}%`;

        animationFrameId = requestAnimationFrame(fp_architecture_vr_3d_environment_loading_ui_loop);
    }

    animationFrameId = requestAnimationFrame(fp_architecture_vr_3d_environment_loading_ui_loop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrameId);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});

Created by Digital Market Created: Apr 28, 2026 • Updated: Apr 28, 2026

Description

Let us look at the Arch VR Loader Slate Holographic component. This free UI asset offers a modular card system specifically engineered for the high precision architecture and interior design sector. We built this entirely from scratch to handle heavy 3D model staging and virtual tour initialization without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing project management or client presentation architecture.

Architectural platforms process massive amounts of high resolution 3D data and require absolute stability during virtual reality walkthroughs. Heavy client side payloads completely ruin the user experience when architects expect immediate visual feedback on asset loading progress. This component solves that bottleneck directly. By strictly avoiding external libraries like Tailwind, Bootstrap, or GSAP, it keeps your bundle size minimal. This ensures rapid rendering for developers who need to present active rendering states to clients on varied mobile data speeds.

Technical Architecture & Performance

Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance metrics: Optimized to help your architectural software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.
Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

The visual direction utilizes professional Slate Blue tones to establish a sophisticated and technical environment for the end user. This holographic and highly readable aesthetic ensures visual clarity for designers analyzing complex project metadata and dense floor plan files. For the interaction layer, we implemented a custom zoom in and out loop animation. This rhythmic visual transition provides clear feedback for active spatial loading and 3D environment preparation without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise design platforms.

Enterprise Use Cases

BIM model staging dashboards: Display active 3D asset loading progress and rendering status using the card grid so project leads can monitor file readiness quickly.
VR walkthrough portals: Build a fast rendering transition page where interior designers can organize and review massive datasets of texture assets within a lightweight interface.
Commercial real estate panels: Create a responsive control layout for developers to track active 3D tour views and loading efficiency across multiple regional property portfolios.

Technical Details

ElementCards
IndustryArchitecture, Interior Design
StyleHolographic, Iridescent
AnimationOut Loop, Zoom
ColorWhite

Report Issue

Highlights & Benefits

Copy-Paste Ready

Drop the code straight into your project without configuration.

Zero Dependencies

Built strictly with pure CSS & Vanilla JS for maximum speed.

ADA & WCAG Ready

Constructed with strict adherence to WCAG accessibility standards for perfect contrast and screen-reader support.

Sterile DOM Structure

Utilizes a highly optimized, clean DOM architecture ensuring lightning-fast render and maximum PageSpeed scores.

You need an active subscription or purchase to leave a review for this premium component.

Arch VR Loader – Slate Holographic

Category: UI Component

Description

Description

Technical Architecture & Performance

Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance metrics: Optimized to help your architectural software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.
Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

Enterprise Use Cases

BIM model staging dashboards: Display active 3D asset loading progress and rendering status using the card grid so project leads can monitor file readiness quickly.
VR walkthrough portals: Build a fast rendering transition page where interior designers can organize and review massive datasets of texture assets within a lightweight interface.
Commercial real estate panels: Create a responsive control layout for developers to track active 3D tour views and loading efficiency across multiple regional property portfolios.

Arch VR Loader – Slate Holographic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

Arch VR Loader – Slate Holographic

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

EV Battery Liquid State – Fire Brick Sporty Dynamic

MedTech Biometric Scan – Ice Blue Glassmorphism

Creative Studio Upload Matrix – Mint Fresh Matte Neon

OTT Memory Allocation – Crimson Neumorphism