Free

Pharma Backup State – Ice Blue Carbon Fiber

<div class="fp-biotech-cloud-backup-status-ui">
    <div class="fp-biotech-cloud-backup-status-ui-stage" id="fp-biotech-cloud-backup-status-ui-stage">
        
        <div class="fp-biotech-cloud-backup-status-ui-carbon"></div>
        <div class="fp-biotech-cloud-backup-status-ui-ambient"></div>

        <div class="fp-biotech-cloud-backup-status-ui-panel">
            
            <div class="fp-biotech-cloud-backup-status-ui-header">
                <h3 class="fp-biotech-cloud-backup-status-ui-title">BioVault Node</h3>
                <div class="fp-biotech-cloud-backup-status-ui-status-badge" id="fp-biotech-cloud-backup-status-ui-badge">
                    <div class="fp-biotech-cloud-backup-status-ui-pulse-dot"></div>
                    <span id="fp-biotech-cloud-backup-status-ui-status-text">UPLOADING</span>
                </div>
            </div>

            <div class="fp-biotech-cloud-backup-status-ui-core-container">
                <div class="fp-biotech-cloud-backup-status-ui-ring fp-biotech-cloud-backup-status-ui-ring-1"></div>
                <div class="fp-biotech-cloud-backup-status-ui-ring fp-biotech-cloud-backup-status-ui-ring-2"></div>
                
                <svg class="fp-biotech-cloud-backup-status-ui-svg-wrap" viewBox="0 0 150 150">
                    <circle class="fp-biotech-cloud-backup-status-ui-track" cx="75" cy="75" r="65"></circle>
                    <circle class="fp-biotech-cloud-backup-status-ui-progress" id="fp-biotech-cloud-backup-status-ui-svg-progress" cx="75" cy="75" r="65"></circle>
                </svg>

                <div class="fp-biotech-cloud-backup-status-ui-orb">
                    <span class="fp-biotech-cloud-backup-status-ui-percent" id="fp-biotech-cloud-backup-status-ui-percent">0%</span>
                    <span class="fp-biotech-cloud-backup-status-ui-lbl">SYNCED</span>
                </div>
            </div>

            <div class="fp-biotech-cloud-backup-status-ui-footer">
                <div class="fp-biotech-cloud-backup-status-ui-data-line">
                    <span>Target Stream</span>
                    <span class="fp-biotech-cloud-backup-status-ui-data-val" id="fp-biotech-cloud-backup-status-ui-stream">GENOME_SEQ_001</span>
                </div>
                <div class="fp-biotech-cloud-backup-status-ui-data-line">
                    <span>Transfer Rate</span>
                    <span class="fp-biotech-cloud-backup-status-ui-data-val" id="fp-biotech-cloud-backup-status-ui-rate">1.4 GB/s</span>
                </div>
            </div>

        </div>

    </div>
</div>

.fp-biotech-cloud-backup-status-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: #64748b; 
    --fp-soft-color: #e0f2fe; 
    --fp-background-color: transparent;

    --fp-info-color: #7dd3fc; 
    --fp-warning-color: #38bdf8; 
    --fp-danger-color: #0284c7; 
    --fp-accent-color: #bae6fd; 
    --fp-text-color: #0f172a; 

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

.fp-biotech-cloud-backup-status-ui * {
    box-sizing: inherit;
}

.fp-biotech-cloud-backup-status-ui-stage {
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.1);
    border: 1px solid var(--fp-soft-color);
}

.fp-biotech-cloud-backup-status-ui-carbon {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(135deg, rgba(15, 23, 42, 0.02) 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, rgba(15, 23, 42, 0.02) 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, rgba(15, 23, 42, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(15, 23, 42, 0.02) 25%, transparent 25%);
    background-size: 20px 20px;
    z-index: 0;
}

.fp-biotech-cloud-backup-status-ui-ambient {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(186, 230, 253, 0.4) 0%, transparent 60%);
    animation: fp-biotech-cloud-backup-status-ui-breathe 5s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes fp-biotech-cloud-backup-status-ui-breathe {
    0% { transform: scale(0.85); opacity: 0.5; }
    100% { transform: scale(1.15); opacity: 1; }
}

.fp-biotech-cloud-backup-status-ui-panel {
    position: relative;
    z-index: 10;
    width: 80%;
    height: 80%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
}

.fp-biotech-cloud-backup-status-ui-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-biotech-cloud-backup-status-ui-title {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fp-text-color);
    margin: 0;
}

.fp-biotech-cloud-backup-status-ui-status-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--fp-soft-color);
    color: var(--fp-danger-color);
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.fp-biotech-cloud-backup-status-ui-pulse-dot {
    width: 6px; height: 6px;
    background: var(--fp-danger-color);
    border-radius: 50%;
    animation: fp-biotech-cloud-backup-status-ui-blink 1.5s infinite;
}

@keyframes fp-biotech-cloud-backup-status-ui-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.fp-biotech-cloud-backup-status-ui-core-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-biotech-cloud-backup-status-ui-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    z-index: 1;
}

.fp-biotech-cloud-backup-status-ui-ring-1 {
    width: 180px; height: 180px;
    border-top-color: var(--fp-info-color);
    border-bottom-color: var(--fp-accent-color);
    opacity: 0.6;
    animation: fp-biotech-cloud-backup-status-ui-spin 8s linear infinite;
}

.fp-biotech-cloud-backup-status-ui-ring-2 {
    width: 210px; height: 210px;
    border-left-color: var(--fp-soft-color);
    border-right-color: var(--fp-warning-color);
    border-style: dashed;
    opacity: 0.4;
    animation: fp-biotech-cloud-backup-status-ui-spin-rev 12s linear infinite;
}

@keyframes fp-biotech-cloud-backup-status-ui-spin {
    100% { transform: rotate(360deg); }
}
@keyframes fp-biotech-cloud-backup-status-ui-spin-rev {
    100% { transform: rotate(-360deg); }
}

.fp-biotech-cloud-backup-status-ui-svg-wrap {
    position: absolute;
    width: 150px; height: 150px;
    transform: rotate(-90deg);
    z-index: 2;
}

.fp-biotech-cloud-backup-status-ui-track {
    fill: none;
    stroke: var(--fp-secondary-color);
    stroke-width: 8;
}

.fp-biotech-cloud-backup-status-ui-progress {
    fill: none;
    stroke: var(--fp-danger-color);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 408; 
    stroke-dashoffset: 408;
    transition: stroke-dashoffset 0.3s linear, stroke 0.4s ease;
}

.fp-biotech-cloud-backup-status-ui-orb {
    width: 120px; height: 120px;
    background: var(--fp-primary-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
    border: 1px solid var(--fp-soft-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fp-biotech-cloud-backup-status-ui-percent {
    font-size: 2rem;
    font-weight: 800;
    color: var(--fp-text-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color 0.4s ease;
}

.fp-biotech-cloud-backup-status-ui-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fp-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.fp-biotech-cloud-backup-status-ui-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fp-biotech-cloud-backup-status-ui-data-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: var(--fp-muted-color);
    border-bottom: 1px solid var(--fp-soft-color);
    padding-bottom: 6px;
}

.fp-biotech-cloud-backup-status-ui-data-val {
    font-family: ui-monospace, monospace;
    font-weight: 600;
    color: var(--fp-text-color);
    transition: color 0.3s;
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-orb {
    transform: scale(1.15);
    background: var(--fp-soft-color);
    border-color: var(--fp-info-color);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-percent {
    color: var(--fp-danger-color);
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-progress {
    stroke: var(--fp-warning-color);
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-status-badge {
    background: var(--fp-warning-color);
    color: var(--fp-primary-color);
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-pulse-dot {
    background: var(--fp-primary-color);
    animation: none;
}

.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-ring-1,
.fp-biotech-cloud-backup-status-ui-stage.is-completed .fp-biotech-cloud-backup-status-ui-ring-2 {
    animation-duration: 2s; 
    border-color: var(--fp-warning-color);
}

@media (max-width: 480px) {
    .fp-biotech-cloud-backup-status-ui-panel { width: 90%; height: 90%; padding: 20px; }
    .fp-biotech-cloud-backup-status-ui-core-container { width: 160px; height: 160px; }
    .fp-biotech-cloud-backup-status-ui-svg-wrap { width: 130px; height: 130px; }
    .fp-biotech-cloud-backup-status-ui-orb { width: 100px; height: 100px; }
    .fp-biotech-cloud-backup-status-ui-percent { font-size: 1.5rem; }
    .fp-biotech-cloud-backup-status-ui-ring-1 { width: 140px; height: 140px; }
    .fp-biotech-cloud-backup-status-ui-ring-2 { width: 170px; height: 170px; }
}

(function() {
    document.querySelectorAll('.fp-biotech-cloud-backup-status-ui').forEach(root => {
        const stage = root.querySelector('#fp-biotech-cloud-backup-status-ui-stage');
        const svgProgress = root.querySelector('#fp-biotech-cloud-backup-status-ui-svg-progress');
        const percentText = root.querySelector('#fp-biotech-cloud-backup-status-ui-percent');
        const statusText = root.querySelector('#fp-biotech-cloud-backup-status-ui-status-text');
        const streamText = root.querySelector('#fp-biotech-cloud-backup-status-ui-stream');
        const rateText = root.querySelector('#fp-biotech-cloud-backup-status-ui-rate');

        if (!stage || !svgProgress || !percentText) return;

        const circumference = 2 * Math.PI * 65;
        svgProgress.style.strokeDasharray = circumference;
        svgProgress.style.strokeDashoffset = circumference;

        let animationFrameId;
        let lastUpdate = 0;
        let progress = 0;
        let state = 'UPLOADING'; 
        
        const fileStreams = [
            "GENOME_SEQ_001", "CRISPR_TRIAL_2B", "RNA_MAP_V9", 
            "CLINICAL_DATA_Q4", "PROTEIN_FOLD_X"
        ];

        function fp_biotech_cloud_backup_status_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                observer.disconnect();
                document.removeEventListener('visibilitychange', fp_biotech_cloud_backup_status_ui_handleVisibilityChange);
                return;
            }

            if (document.visibilityState === 'visible') {
                if (!lastUpdate) lastUpdate = timestamp;

                if (state === 'UPLOADING') {
                    if (Math.random() > 0.9 && rateText) {
                        rateText.textContent = (1.2 + Math.random() * 0.8).toFixed(1) + " GB/s";
                    }

                    const delta = timestamp - lastUpdate;
                    if (delta > 50) { 
                        progress += (Math.random() * 1.5);
                        lastUpdate = timestamp;

                        if (progress >= 100) {
                            progress = 100;
                            state = 'COMPLETED';
                            
                            stage.classList.add('is-completed');
                            if(statusText) statusText.textContent = "SECURED";
                            if(rateText) rateText.textContent = "0.0 GB/s";
                            percentText.textContent = "100%";
                            svgProgress.style.strokeDashoffset = 0;
                            
                            setTimeout(() => {
                                if (document.body.contains(root)) {
                                    state = 'HOLD';
                                }
                            }, 3000);
                        } else {
                            percentText.textContent = Math.floor(progress) + "%";
                            const offset = circumference - (progress / 100) * circumference;
                            svgProgress.style.strokeDashoffset = offset;
                            
                            if (Math.random() > 0.97 && streamText) {
                                streamText.textContent = fileStreams[Math.floor(Math.random() * fileStreams.length)];
                            }
                        }
                    }
                } else if (state === 'HOLD') {
                    progress = 0;
                    state = 'UPLOADING';
                    stage.classList.remove('is-completed');
                    if(statusText) statusText.textContent = "UPLOADING";
                    percentText.textContent = "0%";
                    svgProgress.style.strokeDashoffset = circumference;
                    if(streamText) streamText.textContent = fileStreams[Math.floor(Math.random() * fileStreams.length)];
                }
            }

            animationFrameId = requestAnimationFrame(fp_biotech_cloud_backup_status_ui_loop);
        }

        function fp_biotech_cloud_backup_status_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                    lastUpdate = 0;
                }
            } else {
                if (!animationFrameId) {
                    lastUpdate = performance.now();
                    animationFrameId = requestAnimationFrame(fp_biotech_cloud_backup_status_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_biotech_cloud_backup_status_ui_handleVisibilityChange);

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!animationFrameId && document.visibilityState === 'visible') {
                        lastUpdate = performance.now();
                        animationFrameId = requestAnimationFrame(fp_biotech_cloud_backup_status_ui_loop);
                    }
                } else {
                    if (animationFrameId) {
                        cancelAnimationFrame(animationFrameId);
                        animationFrameId = null;
                    }
                }
            });
        }, { threshold: 0.1 });

        observer.observe(root);
    });
})();

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

Description

Let us look at the Pharma Backup State Ice Blue Carbon Fiber component. This free UI asset provides a modular card system specifically engineered for the biotechnology and pharmaceutical sectors. We built this entirely from scratch to handle complex system status displays without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing enterprise architecture.

BioTech platforms often process massive amounts of clinical trial data and require strict backup redundancy. Heavy client side payloads completely ruin performance metrics in these critical scenarios. 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 lab technicians and database administrators who need to review system backup states on secure internal networks.

Technical Architecture & Performance

Zero dependency foundation: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your stack incredibly light.
Guaranteed performance: Optimized to help your clinical software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Scoped styling: CSS is tightly scoped to prevent any class name collisions when dropping these cards into a massive legacy codebase.
Sterile DOM structure: Clean markup with no unnecessary wrapper divs or convoluted nesting trees to parse.

Design & Aesthetic Impact

The visual direction pairs clinical Ice Blue tones with a clear carbon fiber aesthetic to reduce visual clutter during intense data reviews. This crisp approach ensures readability for complex pharmaceutical records and backup logs. For the interaction layer, we implemented Biru Navy animations. These deep navy blue transitions provide fluid hover states and layout shifts without feeling overly playful. The result is a highly professional interface that feels both modern and perfectly suited for strict laboratory environments.

Enterprise Use Cases

Clinical trial data backups: Display daily database synchronization logs using the card grid so research teams can monitor secure data vaults quickly.
Laboratory equipment statuses: Build a fast rendering monitoring portal where facility managers can track the backup power states of critical cold storage units.
Regulatory compliance dashboards: Create a responsive control panel for compliance officers to review audit trails and archive integrity across multiple testing facilities.

Technical Details

ElementCards
IndustryBioTech, Pharma
StyleCarbon Fiber Tech
ColorWhite, Blue

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.

Pharma Backup State – Ice Blue Carbon Fiber

Category: UI Component

Description

Description

Technical Architecture & Performance

Zero dependency foundation: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your stack incredibly light.
Guaranteed performance: Optimized to help your clinical software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.
Scoped styling: CSS is tightly scoped to prevent any class name collisions when dropping these cards into a massive legacy codebase.
Sterile DOM structure: Clean markup with no unnecessary wrapper divs or convoluted nesting trees to parse.

Design & Aesthetic Impact

Enterprise Use Cases

Clinical trial data backups: Display daily database synchronization logs using the card grid so research teams can monitor secure data vaults quickly.
Laboratory equipment statuses: Build a fast rendering monitoring portal where facility managers can track the backup power states of critical cold storage units.
Regulatory compliance dashboards: Create a responsive control panel for compliance officers to review audit trails and archive integrity across multiple testing facilities.

Pharma Backup State – Ice Blue Carbon Fiber

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

Pharma Backup State – Ice Blue Carbon Fiber

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

FinTech Data Flow – Slate Blue Skeuomorphic

MedTech Biometric Scan – Ice Blue Glassmorphism

Logistics Delivery Pipeline – Cobalt Corporate Brutalism

PropTech Security Shield – Teal Holographic