Free

MedTech Loyalty Counter – Mint Medical Clean

<div class="fp-healthcare-patient-loyalty-points-ui">
    <div class="fp-healthcare-patient-loyalty-points-ui-stage" id="fp-healthcare-patient-loyalty-points-ui-stage">
        
        <div class="fp-healthcare-patient-loyalty-points-ui-grid"></div>
        <div class="fp-healthcare-patient-loyalty-points-ui-ambient"></div>

        <div class="fp-healthcare-patient-loyalty-points-ui-content">
            
            <div class="fp-healthcare-patient-loyalty-points-ui-header">
                <div class="fp-healthcare-patient-loyalty-points-ui-brand">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                    MedRewards
                </div>
                <div class="fp-healthcare-patient-loyalty-points-ui-badge">
                    <div class="fp-healthcare-patient-loyalty-points-ui-dot"></div>
                    SYNCED
                </div>
            </div>

            <div class="fp-healthcare-patient-loyalty-points-ui-center">
                <div class="fp-healthcare-patient-loyalty-points-ui-ring fp-healthcare-patient-loyalty-points-ui-ring-1"></div>
                <div class="fp-healthcare-patient-loyalty-points-ui-ring fp-healthcare-patient-loyalty-points-ui-ring-2"></div>
                
                <div class="fp-healthcare-patient-loyalty-points-ui-core">
                    <span class="fp-healthcare-patient-loyalty-points-ui-val" id="fp-healthcare-patient-loyalty-points-ui-val">1,250</span>
                    <span class="fp-healthcare-patient-loyalty-points-ui-lbl">WELLNESS PTS</span>
                </div>

                <div class="fp-healthcare-patient-loyalty-points-ui-pop" id="fp-healthcare-patient-loyalty-points-ui-pop">+50</div>
            </div>

            <div class="fp-healthcare-patient-loyalty-points-ui-footer">
                <div class="fp-healthcare-patient-loyalty-points-ui-footer-header">
                    <span>Free Teleconsultation</span>
                    <span id="fp-healthcare-patient-loyalty-points-ui-target">150 to go</span>
                </div>
                <div class="fp-healthcare-patient-loyalty-points-ui-progress-bar">
                    <div class="fp-healthcare-patient-loyalty-points-ui-progress-fill" id="fp-healthcare-patient-loyalty-points-ui-fill"></div>
                </div>
            </div>

        </div>

    </div>
</div>

.fp-healthcare-patient-loyalty-points-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff; 
    --fp-secondary-color: #f0fdf4; 
    --fp-muted-color: #166534; 
    --fp-soft-color: #dcfce7; 
    --fp-background-color: transparent;

    --fp-info-color: #6ee7b7; 
    --fp-warning-color: #34d399; 
    --fp-danger-color: #059669; 
    --fp-accent-color: #10b981; 
    --fp-text-color: #14532d; 

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

.fp-healthcare-patient-loyalty-points-ui * {
    box-sizing: inherit;
}

.fp-healthcare-patient-loyalty-points-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 20px 40px -10px rgba(20, 83, 45, 0.08);
    border: 1px solid var(--fp-soft-color);
}

.fp-healthcare-patient-loyalty-points-ui-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--fp-soft-color) 2px, transparent 2px);
    background-size: 24px 24px;
    opacity: 0.6;
    z-index: 0;
}

.fp-healthcare-patient-loyalty-points-ui-ambient {
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
    animation: fp-healthcare-patient-loyalty-points-ui-breathe 4s ease-in-out infinite alternate;
    z-index: 1;
    pointer-events: none;
}

@keyframes fp-healthcare-patient-loyalty-points-ui-breathe {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 1; }
}

.fp-healthcare-patient-loyalty-points-ui-content {
    position: relative;
    z-index: 10;
    width: 85%;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid var(--fp-soft-color);
    padding: 24px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.05);
}

.fp-healthcare-patient-loyalty-points-ui-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-healthcare-patient-loyalty-points-ui-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--fp-text-color);
    letter-spacing: 0.05em;
}

.fp-healthcare-patient-loyalty-points-ui-brand svg {
    width: 20px;
    height: 20px;
    color: var(--fp-accent-color);
}

.fp-healthcare-patient-loyalty-points-ui-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--fp-secondary-color);
    color: var(--fp-danger-color);
    padding: 6px 12px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--fp-soft-color);
}

.fp-healthcare-patient-loyalty-points-ui-dot {
    width: 6px;
    height: 6px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-healthcare-patient-loyalty-points-ui-pulse 2s infinite;
}

@keyframes fp-healthcare-patient-loyalty-points-ui-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px var(--fp-accent-color); }
    50% { opacity: 0.4; transform: scale(0.8); box-shadow: none; }
}

.fp-healthcare-patient-loyalty-points-ui-center {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-healthcare-patient-loyalty-points-ui-ring {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.fp-healthcare-patient-loyalty-points-ui-ring-1 {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--fp-info-color);
    opacity: 0.6;
    animation: fp-healthcare-patient-loyalty-points-ui-spin 12s linear infinite;
}

.fp-healthcare-patient-loyalty-points-ui-ring-2 {
    width: 115%;
    height: 115%;
    border: 1px solid var(--fp-soft-color);
    border-top-color: var(--fp-accent-color);
    border-bottom-color: var(--fp-accent-color);
    opacity: 0.4;
    animation: fp-healthcare-patient-loyalty-points-ui-spin-rev 18s linear infinite;
}

@keyframes fp-healthcare-patient-loyalty-points-ui-spin {
    to { transform: rotate(360deg); }
}
@keyframes fp-healthcare-patient-loyalty-points-ui-spin-rev {
    to { transform: rotate(-360deg); }
}

.fp-healthcare-patient-loyalty-points-ui-core {
    width: 160px;
    height: 160px;
    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 12px 24px rgba(16, 185, 129, 0.12);
    border: 4px solid var(--fp-primary-color);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.fp-healthcare-patient-loyalty-points-ui-core::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fp-info-color), var(--fp-primary-color));
    z-index: -1;
}

.fp-healthcare-patient-loyalty-points-ui-val {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--fp-text-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.fp-healthcare-patient-loyalty-points-ui-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fp-danger-color);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 4px;
}

.fp-healthcare-patient-loyalty-points-ui-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--fp-primary-color);
    background: var(--fp-accent-color);
    padding: 4px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 10;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
}

.fp-healthcare-patient-loyalty-points-ui-stage.is-awarding .fp-healthcare-patient-loyalty-points-ui-pop {
    animation: fp-healthcare-patient-loyalty-points-ui-float-up 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fp-healthcare-patient-loyalty-points-ui-float-up {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20% { opacity: 1; transform: translate(-50%, -120px) scale(1.1); }
    80% { opacity: 1; transform: translate(-50%, -140px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -160px) scale(0.9); }
}

.fp-healthcare-patient-loyalty-points-ui-stage.is-awarding .fp-healthcare-patient-loyalty-points-ui-core {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.3);
}

.fp-healthcare-patient-loyalty-points-ui-stage.is-awarding .fp-healthcare-patient-loyalty-points-ui-val {
    color: var(--fp-accent-color);
}

.fp-healthcare-patient-loyalty-points-ui-stage.is-awarding .fp-healthcare-patient-loyalty-points-ui-ring-1 {
    animation-duration: 3s;
    border-color: var(--fp-accent-color);
}

.fp-healthcare-patient-loyalty-points-ui-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--fp-primary-color);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--fp-soft-color);
}

.fp-healthcare-patient-loyalty-points-ui-footer-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fp-text-color);
}

.fp-healthcare-patient-loyalty-points-ui-footer-header span:last-child {
    color: var(--fp-danger-color);
}

.fp-healthcare-patient-loyalty-points-ui-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--fp-soft-color);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.fp-healthcare-patient-loyalty-points-ui-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 45%; 
    background: var(--fp-accent-color);
    border-radius: 100px;
    transition: width 0.5s ease;
}

@media (max-width: 480px) {
    .fp-healthcare-patient-loyalty-points-ui-content { width: 90%; height: 90%; padding: 20px; }
    .fp-healthcare-patient-loyalty-points-ui-center { width: 180px; height: 180px; }
    .fp-healthcare-patient-loyalty-points-ui-core { width: 130px; height: 130px; }
    .fp-healthcare-patient-loyalty-points-ui-val { font-size: 2rem; }
    .fp-healthcare-patient-loyalty-points-ui-footer { padding: 12px; }
}

(function() {
    document.querySelectorAll('.fp-healthcare-patient-loyalty-points-ui').forEach(root => {
        const stage = root.querySelector('#fp-healthcare-patient-loyalty-points-ui-stage');
        const valEl = root.querySelector('#fp-healthcare-patient-loyalty-points-ui-val');
        const fillEl = root.querySelector('#fp-healthcare-patient-loyalty-points-ui-fill');
        const targetEl = root.querySelector('#fp-healthcare-patient-loyalty-points-ui-target');
        const popEl = root.querySelector('#fp-healthcare-patient-loyalty-points-ui-pop');

        if (!stage || !valEl || !fillEl || !targetEl) return;

        let animationFrameId;
        let lastEventTime = 0;
        
        let displayPts = 1250;
        let targetPts = 1250;
        const goalPts = 1500;
        let isAwarding = false;

        fillEl.style.width = `${(displayPts / goalPts) * 100}%`;
        targetEl.textContent = `${goalPts - displayPts} to go`;

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

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

                if (!isAwarding && timestamp - lastEventTime > 4000) {
                    isAwarding = true;
                    lastEventTime = timestamp;
                    
                    const awardAmount = 50;
                    targetPts += awardAmount;
                    
                    if (targetPts >= goalPts) {
                        targetPts = 1000; 
                        displayPts = 1000;
                    } else {
                        stage.classList.add('is-awarding');
                        if (popEl) popEl.textContent = `+${awardAmount}`;
                        
                        setTimeout(() => {
                            if(document.body.contains(root)) {
                                stage.classList.remove('is-awarding');
                                isAwarding = false;
                            }
                        }, 1500);
                    }
                }

                if (displayPts < targetPts) {
                    displayPts += (targetPts - displayPts) * 0.08;
                    if (targetPts - displayPts < 0.5) displayPts = targetPts;
                    
                    valEl.textContent = Math.floor(displayPts).toLocaleString();
                    
                    const remaining = goalPts - Math.floor(displayPts);
                    targetEl.textContent = `${remaining} to go`;
                    fillEl.style.width = `${(displayPts / goalPts) * 100}%`;
                }
            }

            animationFrameId = requestAnimationFrame(fp_healthcare_patient_loyalty_points_ui_loop);
        }

        function fp_healthcare_patient_loyalty_points_ui_handleVisibilityChange() {
            if (document.visibilityState === 'hidden') {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                    animationFrameId = null;
                    lastEventTime = 0; 
                }
            } else {
                if (!animationFrameId) {
                    lastEventTime = performance.now();
                    animationFrameId = requestAnimationFrame(fp_healthcare_patient_loyalty_points_ui_loop);
                }
            }
        }

        document.addEventListener('visibilitychange', fp_healthcare_patient_loyalty_points_ui_handleVisibilityChange);

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

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

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

Description

Let us look at the MedTech Loyalty Counter Mint Medical Clean component. This free UI asset provides a modular card system specifically engineered for the healthcare and medical technology sector. We built this entirely from scratch to handle complex patient reward metrics without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing medical application architecture.

Healthcare platforms often process dense patient portals and require fast render times to maintain compliance and user trust. 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 clinic administrators and patients who need to review health portal updates on busy hospital networks.

Technical Architecture & Performance

Zero dependency foundation: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance: Engineered specifically to help your medical software achieve and maintain 90+ PageSpeed scores.
Safely scoped CSS: All styling is strictly scoped to ensure zero class name conflicts when you import these cards into massive hospital management systems.
Sterile DOM structure: Features clean markup with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

The visual design relies on soothing Mint Fresh tones combined with a clinical grid layout to establish trust and clarity instantly. This clean approach works perfectly for dense healthcare interfaces and secure patient portals. For the interaction layer, we utilized Hijau Hutan animations. These rich forest green transitions give the cards a grounded and reassuring feel during hover states. The final result is a highly modern user interface that looks premium and functions perfectly within strict medical environments.

Enterprise Use Cases

Patient portal dashboards: Display live wellness tracking points and appointment loyalty rewards using the card grid so patients can monitor their health milestones quickly.
Clinic administration panels: Build a fast rendering staff management page where hospital directors can track internal compliance rewards and certification points within a lightweight interface.
Health insurance platforms: Create a responsive control panel for insurance providers to easily manage member benefit tiers and healthy living incentives.

Technical Details

ElementCards
StyleMedical Clean
ColorWhite, Green

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.

MedTech Loyalty Counter – Mint Medical Clean

Category: UI Component

Description

Description

Technical Architecture & Performance

Zero dependency foundation: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.
Guaranteed performance: Engineered specifically to help your medical software achieve and maintain 90+ PageSpeed scores.
Safely scoped CSS: All styling is strictly scoped to ensure zero class name conflicts when you import these cards into massive hospital management systems.
Sterile DOM structure: Features clean markup with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

Enterprise Use Cases

Patient portal dashboards: Display live wellness tracking points and appointment loyalty rewards using the card grid so patients can monitor their health milestones quickly.
Clinic administration panels: Build a fast rendering staff management page where hospital directors can track internal compliance rewards and certification points within a lightweight interface.
Health insurance platforms: Create a responsive control panel for insurance providers to easily manage member benefit tiers and healthy living incentives.

MedTech Loyalty Counter – Mint Medical Clean

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Technical Details

Highlights & Benefits

MedTech Loyalty Counter – Mint Medical Clean

Description

Technical Architecture & Performance

Design & Aesthetic Impact

Enterprise Use Cases

Related products

Machine Learning Neural Sync – Neon Cyan Cyberpunk

CyberSec OTP Input – Midnight Blue Wireframe

Travel 3D Card Verification – Emerald Monochrome Elegant

Esports CPU Gauge – Magenta Industrial Heavy