All components · Category: Content and utilities

Reading progress

An article with a reading bar and a back to top button inside its box.

An article in a box that scrolls by itself, with a bar that fills as you read, an estimate of the reading time and a button that takes you back to the top of the box. The page is never scrolled, and the box answers the keyboard.

Try it

<reading-progress>

ViewPreviewCodeCSS

How a page earns attention

1 min readSample content

A page has a few seconds to say what it is for. Start with the answer, then give the reasons.

Short paragraphs are easier to scan. Each one should carry a single idea, and the first sentence should say which.

Headings are signposts, not decoration. Write them so that someone who reads only the headings still knows the story.

Numbers need context. Say what was measured, over which period, and how, or leave the number out.

Images and motion should earn their place. If removing one does not change what the reader learns, remove it.

Finish with the next step. A reader who got this far deserves a clear, single thing to do.

Test the page on a small screen first. What survives there is usually what mattered.

Read it aloud once. Where you stumble, the reader will too.

reading-progress: An article with a reading bar and a back to top button inside its box. A picture of the real component, drawn from its own code. The controls change the picture and the code beside it; nothing here is sent or stored.

Generated from the component's manifest and the values above.

index.html

<reading-progress locale="en"></reading-progress>

<script>
  const element = document.querySelector("reading-progress");
  element.addEventListener("reading-progress:finished", (event) => {
    console.log(event.detail);
  });
</script>

Add the site's Taggor script once; the component appears when it loads.

taggor-component.js

const element = document.createElement("reading-progress");
element.setAttribute("locale", "en");
element.addEventListener("reading-progress:finished", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Add the site's Taggor script once; the component appears when it loads.

ReadingProgress.tsx

import { useEffect, useRef } from "react";

export function ReadingProgress() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinished = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("reading-progress:finished", onFinished);
    return () => {
      element.removeEventListener("reading-progress:finished", onFinished);
    };
  }, []);

  return <reading-progress ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 18 sends every prop of a custom element as a text attribute.
The event is heard with addEventListener, inside an effect.

ReadingProgress.tsx

import { useEffect, useRef } from "react";

export function ReadingProgress() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinished = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("reading-progress:finished", onFinished);
    return () => {
      element.removeEventListener("reading-progress:finished", onFinished);
    };
  }, []);

  return <reading-progress ref={ref} locale="en" />;
}

Add the site's Taggor script once; the component appears when it loads.
React 19 sets a property when the element already has it, an attribute otherwise.
The event is heard with addEventListener, inside an effect.

src/ReadingProgress.vue

<script setup lang="ts">
function onFinished(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <reading-progress locale="en" @reading-progress:finished="onFinished" />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "reading-progress",
        },
      },
    }),
  ],
});

Add the site's Taggor script once; the component appears when it loads.
vite.config.ts tells Vue that this tag is not a Vue component.

src/app/reading-progress.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-reading-progress",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <reading-progress locale="en"></reading-progress>
  `,
})
export class ReadingProgressComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("reading-progress");
    const onFinished = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("reading-progress:finished", onFinished));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("reading-progress:finished", onFinished));
  }
}

Add the site's Taggor script once; the component appears when it loads.
The component declares CUSTOM_ELEMENTS_SCHEMA.
The event is heard with addEventListener, inside an effect.

src/TaggorComponent.svelte

<script>
  function onFinished(event) {
    console.log(event.detail);
  }
</script>

<reading-progress locale="en" onreading-progress:finished={onFinished}></reading-progress>

Add the site's Taggor script once; the component appears when it loads.

How an agent gets a component like this onto a site:

taggor checktaggor publish

The CSS variables the component exposes, set the way a customer's page would.

styles.css

reading-progress {
  --rp-radius: 16px;
}

Props

Props of the component, read from its manifest
Prop	Type	Default	What it does
heading	string	none	Replaces the article title.
paragraphs	list	none	The article's paragraphs.
height	number 10 to 40	18	Height of the reading box, in em.
hideSample	boolean	false	Hides the Sample content mark (use your own article).
locale	pt-BR \| en	en	–

Prop names and descriptions are the component's own, in English, as its author wrote them.

Events

Events of the component, read from its manifest
Event	When it fires
finished	The reader reached the end of the article.

Build one with your agent

Paste this into your agent. It asks you before it signs in, pays or goes further than checking and publishing.

Build me a Taggor component like "Reading progress" (reading-progress): An article with a reading bar and a back to top button inside its box. Fetch https://taggor.dev/agent-setup/prompt.md and follow its instructions to set me up for Taggor. Ask me before you sign in, create an account, accept terms, pay for anything or type a secret. Check it with `taggor check` and publish it with `taggor publish`, and stop there. Do not promote it to production, attach it to a site, roll back anything or use --yes, --force or --force-drop-invalid unless I ask for exactly that in this conversation.

Related components

Scroll story<scroll-story>
Timeline that draws itself<timeline-draw>