Sticky CTA — Reading Progress

Installation

Variants

Files installed (2)

• src/app/components/blocks/sticky-cta-reading-progress/sticky-cta-reading-progress.component.ts4 kB

  Copy

  // Sticky bottom bar that doubles as a reading-progress indicator, revealing partway down
  // a long page and reporting how much of it remains. Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, inject, signal } from '@angular/core'
  import { ArrowRight, LucideAngularModule, X } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiProgressComponent } from '@/ui/progress/progress.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-sticky-cta-reading-progress, [ui-sticky-cta-reading-progress]',
    standalone: true,
    // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiProgressComponent, UiSeparatorComponent],
    template: `
      <div
        data-slot="sticky-cta-reading-progress"
        [class]="rootClass"
        role="region"
        aria-label="Reading progress and trial offer"
        [attr.aria-hidden]="!visible()"
      >
        <ui-progress [value]="progress()" class="h-0.5 rounded-none" aria-label="Reading progress" />
  
        <div class="mx-auto flex max-w-5xl flex-wrap items-center gap-x-5 gap-y-2 px-6 py-3">
          <span ui-badge variant="secondary" class="shrink-0 tabular-nums">{{ progress() }}% read</span>
  
          <p class="min-w-0 grow text-sm">
            <span class="font-medium">Finished the technical detail?</span>
            <span class="text-muted-foreground"> The trial runs on your real warehouse, read-only.</span>
          </p>
  
          <div class="flex shrink-0 items-center gap-2">
            <button ui-button size="sm">
              Start free
              <lucide-icon [img]="ArrowRight" class="ml-1.5 size-3.5" />
            </button>
            <ui-separator orientation="vertical" class="hidden h-5 sm:block" />
            <button ui-button size="icon" variant="ghost" class="size-7" aria-label="Dismiss" (click)="dismiss()">
              <lucide-icon [img]="X" class="size-3.5" />
            </button>
          </div>
        </div>
      </div>
    `,
  })
  export class UiStickyCtaReadingProgressComponent implements OnInit {
    protected readonly ArrowRight = ArrowRight
    protected readonly X = X
  
    @Input() revealAt = 15
    @Input('class') className?: string
  
    // Both start at rest so server and first client paint agree; the scroll handler
    // is the only thing that reveals the bar or moves the progress.
    readonly progress = signal(0)
    readonly visible = signal(false)
    private dismissed = false
    private onScroll = (): void => {
      if (typeof window === 'undefined' || typeof document === 'undefined') return
      const scrollable = document.documentElement.scrollHeight - window.innerHeight
      const percent = scrollable > 0 ? Math.min(Math.round((window.scrollY / scrollable) * 100), 100) : 0
      this.progress.set(percent)
      this.visible.set(!this.dismissed && percent >= this.revealAt)
    }
  
    constructor() {
      const destroyRef = inject(DestroyRef)
      destroyRef.onDestroy(() => {
        if (typeof window !== 'undefined') {
          window.removeEventListener('scroll', this.onScroll)
          window.removeEventListener('resize', this.onScroll)
        }
      })
    }
  
    ngOnInit(): void {
      if (typeof window === 'undefined') return
      this.onScroll()
      window.addEventListener('scroll', this.onScroll, { passive: true })
      window.addEventListener('resize', this.onScroll)
    }
  
    dismiss(): void {
      this.dismissed = true
      this.visible.set(false)
    }
  
    get rootClass(): string {
      return cn(
        'border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur transition duration-200',
        this.visible() ? 'translate-y-0 opacity-100' : 'pointer-events-none invisible translate-y-full opacity-0',
        this.className,
      )
    }
  }
  

• src/app/components/blocks/sticky-cta-reading-progress/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/sticky-cta-reading-progress.json