Embed

<div class="ftv-progress-card processing" id="ftvProgressCard" aria-label="Processing status">
  <div class="ftv-progress-row">
    <p class="ftv-progress-title">Finalizing your program</p>
    <p class="ftv-progress-percent" id="ftvPercentText">0%</p>
  </div>

  <div class="ftv-progress-bar"
       role="progressbar"
       aria-valuemin="0"
       aria-valuemax="100"
       aria-valuenow="0">
    <div class="ftv-progress-fill" id="ftvFill"></div>
  </div>

  <div class="ftv-progress-message">
    <span class="ftv-progress-dot" aria-hidden="true"></span>
    <span id="ftvMsgText">Starting…</span>
  </div>
</div>

<style>
  /* Entire component is scoped – no body/html/page overrides */
  .ftv-progress-card{
    --ftv-bg: rgba(255,255,255,0.06);
    --ftv-border: rgba(255,255,255,0.12);
    --ftv-text: rgba(255,255,255,0.96);
    --ftv-muted: rgba(255,255,255,0.72);
    --ftv-track: rgba(255,255,255,0.16);
    --ftv-fill: #22c55e; /* green */
    --ftv-radius: 14px;

    width: 100%;
    max-width: 520px;
    margin: 4px 0; /* minimal vertical spacing */
    padding: 14px 14px 12px;
    box-sizing: border-box;

    background: var(--ftv-bg);
    border: 1px solid var(--ftv-border);
    border-radius: var(--ftv-radius);

    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ftv-text);
  }

  .ftv-progress-row{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
  }

  .ftv-progress-title{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ftv-text);
  }

  .ftv-progress-percent{
    margin: 0;
    font-size: 13.5px;
    color: var(--ftv-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ftv-progress-bar{
    width: 100%;
    height: 12px;
    background: var(--ftv-track);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }

  .ftv-progress-fill{
    height: 100%;
    width: 0%;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05)),
      var(--ftv-fill);
    border-radius: 999px;
    transition: width 250ms ease;
    position: relative;
  }

  /* shimmer while processing */
  .ftv-progress-fill::after{
    content:"";
    position:absolute;
    top:0;
    left:-35%;
    width:35%;
    height:100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.55),
      transparent
    );
    transform: skewX(-18deg);
    opacity:0;
  }

  .processing .ftv-progress-fill::after{
    opacity:1;
    animation: ftv-sweep 1.1s linear infinite;
  }

  @keyframes ftv-sweep{
    from { left:-35%; }
    to { left:120%; }
  }

  .ftv-progress-message{
    margin-top: 8px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size: 13.5px;
    color: var(--ftv-muted);
    min-height: 18px;
  }

  .ftv-progress-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    opacity: 0.35;
  }

  .processing .ftv-progress-dot{
    animation: ftv-blink 900ms ease-in-out infinite;
  }

  @keyframes ftv-blink{
    0%,100%{
      opacity:0.35;
      transform: scale(1);
      box-shadow:none;
    }
    50%{
      opacity:1;
      transform: scale(1.15);
      box-shadow: 0 0 14px rgba(34,197,94,0.35);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .processing .ftv-progress-fill::after,
    .processing .ftv-progress-dot{
      animation:none !important;
    }
    .ftv-progress-fill{
      transition:none !important;
    }
  }
</style>

<script>
  (function(){
    const target = 85;
    const minMs = 1800;
    const maxMs = 3000;
    const tick = 60;

    const fill = document.getElementById('ftvFill');
    const pct = document.getElementById('ftvPercentText');
    const msg = document.getElementById('ftvMsgText');
    const bar = document.querySelector('.ftv-progress-bar');

    let current = 0;

    const milestones = [
      { at: 10, text: "Checking details…" },
      { at: 35, text: "Preparing your bonuses…" },
      { at: 60, text: "Securing your access…" },
      { at: 75, text: "Almost there!" }
    ];

    const duration = minMs + Math.random() * (maxMs - minMs);
    const steps = Math.ceil(duration / tick);
    const baseInc = target / steps;

    function setProgress(v){
      const clamped = Math.min(v, 100);
      fill.style.width = clamped + "%";
      pct.textContent = Math.round(clamped) + "%";
      bar.setAttribute("aria-valuenow", Math.round(clamped));
    }

    let lastIdx = -1;

    const timer = setInterval(() => {
      const remaining = target - current;
      current += Math.max(baseInc * 0.35, baseInc * (remaining / target));

      milestones.forEach((m, i) => {
        if (current >= m.at && i !== lastIdx) {
          lastIdx = i;
          msg.textContent = m.text;
        }
      });

      if (current >= target) {
        current = target;
        setProgress(current);
        msg.textContent = "Almost there!";
        clearInterval(timer);
        return;
      }

      setProgress(current);
    }, tick);
  })();
</script>

Text

<h2 style="white-space:pre-line"><span style="color:#f1c40f">WAIT!</span> Last Thing Before Checking Email</h2>

<h3><span style="color:#169179"><strong>STEP 1: Performance Kit (Traveler Non-Negotiable)</strong></span></h3>
<p style="text-align:left"><strong>Lock in the 3 gaps travel creates: sleep, micronutrients, protein, so you stay sharp, steady, and in control.</strong></p>
<p style="text-align:left">✔ Supports focus + mental clarity (micronutrients)</p>
<p style="text-align:left">✔ Supports deeper sleep + calmer stress response (sleep support) </p>
<p style="text-align:left">✔ Helps curb cravings and keep you full (single-serve protein)</p>
<p style="text-align:left">✔ <span style="color:#169179"><strong>GET 20% OFF (Use Code: ADAL20)</strong></span></p>

Image

Call to action

Text + image

<h2 style="white-space:pre-line">STEP 2 - CHECK EMAIL</h2>
<p>⚠️ Recommend checking email on MOBILE to download app directly ⚠️</p>
<p>Check your email for “Welcome to Fittivity” and set your account password</p>
<p><strong>Once complete, you’ll be guided to download the app and log in</strong></p>

Contact form

<h2>QUESTIONS? WE'RE HERE TO HELP</h2>
<p>Our representatives typically will get back to you within 24-48 hours.</p>

WAIT! Last Thing Before Checking Email

STEP 1: Performance Kit (Traveler Non-Negotiable)

STEP 2 - CHECK EMAIL

QUESTIONS? WE'RE HERE TO HELP