v135 · css / scrolling
Progress Tracker
A multi-step onboarding flow using ::scroll-marker and ::scroll-marker-group for native step indicators. Clicking a marker scrolls to that step; the active marker is styled with ::scroll-marker:checked. Configure marker shape and style live.
checking ::scroll-marker…
::scroll-marker creates a focusable indicator pseudo-element on each child of a scroll container. ::scroll-marker-group positions them as a group. The :checked state automatically tracks the snapped item — zero JavaScript. Perfect for carousels, onboarding flows, and page-step navigation.
Marker style
Onboarding steps — click the markers below or scroll
1 Create your account
Choose a username and password. We support passkeys for passwordless sign-in. Your data is end-to-end encrypted. This step has two form fields and takes about 30 seconds.
2 Verify your email
We've sent a 6-digit code to your email address. Enter it below to confirm ownership. The code expires in 10 minutes. Didn't receive it? Check spam or click "Resend".
3 Set up your profile
Upload a profile photo, add your name, and choose a timezone. These settings can be changed at any time from your account preferences. All fields are optional.
4 Choose your plan
Free, Pro, or Team. Free includes 5 projects and 1GB storage. Pro adds unlimited projects and priority support. Team adds shared workspaces. Cancel anytime.
5 All done!
Your account is ready. Explore the dashboard, invite teammates, or start a new project right now. Refer a friend and both of you get a free month of Pro.
Generated CSS