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{
    /* optimized for white/light backgrounds */
    --ftv-bg: #ffffff;
    --ftv-border: rgba(15,23,42,0.14);
    --ftv-text: rgba(15,23,42,0.92);
    --ftv-muted: rgba(15,23,42,0.62);
    --ftv-track: rgba(15,23,42,0.10);
    --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.55), rgba(255,255,255,0.08)),
      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.70),
      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(15,23,42,0.88);
    opacity: 0.30;
  }

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

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

  @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 = 70;   // cap the animation at 70%
    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;

    // milestones adjusted to the 70% cap (same vibe, same count)
    const milestones = [
      { at: 10, text: "Checking details…" },
      { at: 28, text: "Preparing your bonuses…" },
      { at: 50, text: "Securing your access…" },
      { at: 65, 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! Finalize below";
        clearInterval(timer);
        return;
      }

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

Logo showcase

Quote/testimonial

"Besides getting bit by mosquitos during the workout, I've been sticking to my hotel gym setup on my 2-month trip to South East Asia. Thanks Coach Adal for keeping me on it!"

"Wooo! Another way this lifestyle works perfectly for me. Adapt and push forward, NOT held down by a strict routine 100% of the time"

"I genuinely appreciate you, definitely needed to hear some encouragement. You sent that message in the middle of my workout, helped me push through haha"

I appreciate your support so much!! That's why I don't want to take a break from my routine 🤣🤣"