No. 61 of 106

Page Scroll Progress Bar

A reading-progress bar.

    On this page
  1. Page Scroll Progress
  2. Show readers where they are
  3. Ten ways to draw a line
  4. A corner that counts
  5. Reward the reader
NEWSON · ELEMENT NO. 61

Scroll this page — the glowing bar at the top and the circle at the bottom-left are real (reach the end for confetti). Below, every reading window has its own indicator: scroll inside them to try all six types and the finish effects.

edge bar ×10chapter barprogress circle ×5reading-time pillsticky reading headersection dotstime leftclick to jumpfinish effects
6 INDICATOR TYPES

Pick a bar, chapters, a circle, a reading-time pill, a sticky reading header or section dots. Each window below is one widget — scroll inside it.

barchapterscirclepillheaderdots
blog / page-speed

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

0%
Edge bar · blog postThe classic thin bar with a percent bubble that rides along.
docs / getting-started

Getting started with the API

Create a key

Open your dashboard, go to Settings → API and create a new key. Keep it private — anyone with the key can act on your account.

Make your first request

Send a GET request to /v1/projects with your key in the Authorization header. You will get back a list of your projects as JSON.

Handle errors

Every error returns a clear code and message. Retry on 429 (too many requests) after the time given in the Retry-After header.

Use webhooks

Instead of polling, register a webhook URL and we will send you an event whenever something changes.

Go live

Switch from the test key to the live key when you are ready. Nothing else in your code needs to change.

— The end · sample text for this demo —

Chapter bar · documentationOne part per section — hover to read it, click to jump. Shows chapter number and time left.
recipes / tomato-pasta

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Progress circle · recipeFills as you read, then becomes a back-to-top button.
magazine / long-read

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

0%
Reading-time pill · magazine“3 min left” plus the current section — readers know what they’re in for.
course / lesson-3

Lesson 3 · How to read a poll

Why polls matter

Polls are a snapshot of public opinion at one moment. They can show trends, but they do not predict who will win.

Check the sample

Look at how many people were surveyed and how they were reached. A poll of 1,000 likely voters tells you more than an online click survey.

Mind the margin of error

A 3-point lead with a margin of error of plus or minus 4 points is a statistical tie.

Compare, don’t cherry-pick

One poll can be an outlier. Averages of many polls are a steadier guide.

Your task

Find two recent polls on the same race and explain in a short paragraph why their numbers differ.

— The end · sample text for this demo —

Sticky reading header · online courseSlides in once you start reading: lesson title, section, time left and a top button.
api / quick-start

Getting started with the API

Create a key

Open your dashboard, go to Settings → API and create a new key. Keep it private — anyone with the key can act on your account.

Make your first request

Send a GET request to /v1/projects with your key in the Authorization header. You will get back a list of your projects as JSON.

Handle errors

Every error returns a clear code and message. Retry on 429 (too many requests) after the time given in the Retry-After header.

Use webhooks

Instead of polling, register a webhook URL and we will send you an event whenever something changes.

Go live

Switch from the test key to the live key when you are ready. Nothing else in your code needs to change.

— The end · sample text for this demo —

Section dots · API docsA dot per section down the side; the line fills as you go.
EDGE BAR · 10 STYLES

Top, bottom, left or right edge; any thickness; rounded or square; optional percent bubble.

solidgradientrainbowstripedglowglowing headcolor shiftwaveemojihairline
Solid

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

SolidOne color, no fuss.
Gradient

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

GradientTwo brand colors.
Rainbow

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

RainbowPlayful and bright.
Striped

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

StripedMoving stripes.
Glow

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

GlowSoft neon glow.
Glowing head

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Glowing headA pulsing light at the tip.
Color shift

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

Color shiftChanges color as you read.
Liquid wave

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Liquid waveA wave at the front.
Emoji traveler

City council approves $1.2 billion transit plan after marathon session

A late-night vote

After nearly nine hours of public comment, the council voted 7–2 just before 1 a.m. Wednesday to approve the plan, which adds two light-rail lines and 40 miles of bus lanes by 2032.

Who pays for it

The package relies on a half-cent sales tax approved by voters last fall, plus federal grants the city expects to apply for this winter. Officials said fares will not rise before 2028.

What riders will notice first

Frequent bus service on Lincoln Avenue and Harbor Boulevard is set to start next summer, with buses every 10 minutes during rush hour.

The opposition

Two council members argued the plan underfunds neighborhoods on the city’s east side. Several small-business owners on Fifth Street worry about years of construction.

What happens next

The transit agency will hold community meetings in every district starting Nov. 4. Final route maps are expected in the spring.

— The end · sample text for this demo —

🚀
Emoji travelerA rocket flies along.
Hairline + dot

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Hairline + dotMinimal 2px line.
PROGRESS CIRCLE · 5 STYLES

Choose the corner and size. Clicking the circle always takes the reader back to the top.

ringpercentback to toppiegauge5 corners
Ring

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

RingJust the ring.
Ring + percent

Lesson 3 · How to read a poll

Why polls matter

Polls are a snapshot of public opinion at one moment. They can show trends, but they do not predict who will win.

Check the sample

Look at how many people were surveyed and how they were reached. A poll of 1,000 likely voters tells you more than an online click survey.

Mind the margin of error

A 3-point lead with a margin of error of plus or minus 4 points is a statistical tie.

Compare, don’t cherry-pick

One poll can be an outlier. Averages of many polls are a steadier guide.

Your task

Find two recent polls on the same race and explain in a short paragraph why their numbers differ.

— The end · sample text for this demo —

Ring + percentShows the number.
Back to top

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Back to topClick to go up.
Pie

Lesson 3 · How to read a poll

Why polls matter

Polls are a snapshot of public opinion at one moment. They can show trends, but they do not predict who will win.

Check the sample

Look at how many people were surveyed and how they were reached. A poll of 1,000 likely voters tells you more than an online click survey.

Mind the margin of error

A 3-point lead with a margin of error of plus or minus 4 points is a statistical tie.

Compare, don’t cherry-pick

One poll can be an outlier. Averages of many polls are a steadier guide.

Your task

Find two recent polls on the same race and explain in a short paragraph why their numbers differ.

— The end · sample text for this demo —

PieFills like a pie chart.
Half gauge

Weeknight tomato & basil pasta

Ingredients

400 g spaghetti, 2 tbsp olive oil, 3 garlic cloves, 1 tin chopped tomatoes, a pinch of chilli, salt, a handful of basil and some grated parmesan to finish.

Cook the pasta

Bring a big pot of salted water to the boil and cook the spaghetti until just tender. Keep a mug of the cooking water before draining.

Make the sauce

Warm the oil, add sliced garlic and chilli for a minute, then the tomatoes. Simmer for ten minutes until thick and glossy.

Bring it together

Toss the pasta in the sauce with a splash of the cooking water until everything is coated. Tear in the basil.

Serve

Finish with parmesan and a little more olive oil. Serves four in about twenty minutes.

— The end · sample text for this demo —

Half gaugeLike a speedometer.
FINISH LINE

Short notes below — scroll to the end of each to see what happens.

tickconfettithank-you messageglow
Scroll to the end

A quick note

Thanks for stopping by

This is a short page, so you will reach the end in a moment.

Almost there

Keep scrolling to see what happens when you finish.

— The end · sample text for this demo —

TickThe circle turns into a green tick.
Scroll to the end

A quick note

Thanks for stopping by

This is a short page, so you will reach the end in a moment.

Almost there

Keep scrolling to see what happens when you finish.

— The end · sample text for this demo —

ConfettiA little celebration at the end.
Scroll to the end

A quick note

Thanks for stopping by

This is a short page, so you will reach the end in a moment.

Almost there

Keep scrolling to see what happens when you finish.

— The end · sample text for this demo —

Thanks for reading! 🎉
Thank-you messageA friendly note pops up.
Scroll to the end

A quick note

Thanks for stopping by

This is a short page, so you will reach the end in a moment.

Almost there

Keep scrolling to see what happens when you finish.

— The end · sample text for this demo —

0%
Glow pulseThe pill glows when you finish.

The articles, recipe, docs and lesson in the reading windows are sample text for this demo.

106 elements for news, Page Scroll Progress included.