Reading Progress adds a thin bar along the top or bottom of the screen, or a small ring in a corner, that fills as the visitor scrolls. Point it at your article and it measures the text rather than the whole page. It can also show the percentage read and an estimate of the minutes left.
On a normal page the bar or ring is fixed to the browser window. Here each one is pinned to its own panel so you can try both styles side by side.
Gardening · 4 min read
Most gardens peak in early summer and then fade. The borders are full in June, patchy by September and bare from November to March. It does not have to be that way. With a little planning you can have something worth looking at in every month, and most of the work happens on paper before you buy a single plant.
Before you think about flowers, look at the bones of the garden. Paths, walls, hedges, trees and larger shrubs are what you see in winter when everything else has died back. A clipped box ball, a small multi-stemmed tree or a beech hedge that holds its brown leaves until spring will give the garden shape when the borders are empty.
Walk around the garden in January and make a note of where your eye lands. If it lands on nothing, that is where some structure is needed. Evergreens such as yew, holly, pittosporum and sarcococca are good choices, and the last one gives you scented flowers in the middle of winter too.
Take a sheet of paper and draw four columns, one for each season. Under each one, list the plants you already have that look good at that time of year. Most people find the summer column full and the others almost empty. That tells you exactly what to buy next.
For spring, bulbs are the easiest win. Snowdrops, crocus, daffodils and tulips can be planted in autumn between existing plants and will come up before anything else is in leaf. For late summer and autumn, look at asters, sedums, grasses and Japanese anemones. They carry the borders on long after the roses have finished.
Not everything needs to be cut back in autumn. Grasses, teasels, alliums and many perennials have seed heads that look good with frost on them and feed the birds through the colder months. Leave them standing until late winter and cut everything back in one go before the new growth starts.
Coloured stems are worth a place too. Dogwoods with red or yellow stems and white-barked birches catch low winter sunlight and brighten a dull corner. Cut the dogwoods hard every spring and the new stems will have the strongest colour.
A garden with one of everything tends to look busy. Pick a small number of plants that do well in your soil and repeat them along the border. Repetition leads the eye through the space and makes even a small garden look planned rather than collected.
Finally, keep notes. A photograph of the garden on the first of every month is the simplest record there is. After a year you will know exactly where the gaps are, and what to plant to fill them.
Coffee · 3 min read
Good coffee at home is not about expensive machines. Most of the difference between a flat, bitter cup and a sweet, balanced one comes down to a handful of habits. None of them take long, and together they make a bigger difference than any new gadget.
Coffee is at its best between one and four weeks after roasting. Supermarket bags are often months old by the time they are opened. Look for a roast date on the bag rather than a best before date, and buy smaller amounts more often.
Ground coffee goes stale in minutes, not days. Even a basic burr grinder will improve your cup more than almost anything else on this list. Grind for each brew and adjust the size to suit your method: fine for espresso, medium for filter and coarse for a cafetiere.
Scoops and eyeballing lead to a different cup every morning. A simple kitchen scale fixes that. A good starting point for filter coffee is 60 grams of coffee per litre of water. From there, add more coffee if it tastes thin and less if it tastes too strong.
Boiling water straight from the kettle can scorch the grounds and pull out bitter flavours. Leave the kettle to rest for thirty seconds after it boils, or use a kettle with a temperature setting and aim for between 92 and 96 degrees.
Old coffee oils build up in grinders, filters and cafetieres and make every cup taste stale. Rinse everything after use and give it a proper clean once a week. It is the least exciting tip here, but it is often the one that makes the most difference.
Try one change at a time so you can taste what each one does. Within a couple of weeks your morning cup will be noticeably better.
Add it once to your post template and every article gets one.
Drop Reading Progress anywhere in your post template. It fixes itself to the edge of the screen, so its position in the layout does not matter.
Enter a CSS selector for the post content, such as .bde-post-content, so the indicator reaches 100% at the end of the text. Leave it empty to measure the whole page.
Pick bar or ring, then switch on the percentage, the time remaining, click to top and hide until scrolled as needed.
Small, quiet and useful on any long page.
A full-width bar at the top or bottom of the screen, or a circular ring in any corner.
Give it a CSS selector and progress runs from the start to the end of that element, not the footer and comments below it.
Show the percentage read next to the bar or inside the ring.
Counts the words in the article and shows the minutes left at your chosen reading speed. The text is editable, for example {minutes} min left.
Turn the indicator into a back-to-top button. It works with the keyboard too, and respects reduced motion settings.
Keep it hidden until the reader has scrolled a set percentage, then fade it in.
If the element sits inside a scrolling container, it tracks that container instead of the page.
Recalculates when the page resizes, images load or content is added, so the numbers stay correct.
Set the colours, height, ring size, thickness, line ends, readout typography, borders and z-index.
Any page people read from top to bottom.
Show readers how much is left and encourage them to reach the end.
Give step-by-step guides a sense of progress with a time left estimate.
Add a ring that doubles as a back-to-top button on long reference pages.
Add a slim bar to article templates that matches your brand colour.
Help visitors see how far they are through a detailed project write-up.
Make long terms, privacy and policy pages feel shorter and easier to navigate.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Style | Bar or Ring. | Bar |
| Content Selector | CSS selector of the article to measure. Empty measures the whole page. | — |
| Show percentage | Show the percentage read. | Off |
| Show time remaining | Show an estimate of the minutes left. | Off |
| Words per minute | Reading speed used for the time estimate. | 200 |
| Time remaining text | Text for the estimate. {minutes} is replaced with the number. | {minutes} min left |
| Click to scroll to top | Clicking the indicator scrolls back to the top. | Off |
| Hide until scrolled | Keep the indicator hidden until the reader has scrolled. | Off |
| Show after (%) | How far the reader scrolls before it appears. | 5 |
| Bar | ||
| Position | Top or Bottom of the screen. | Top |
| Height | Thickness of the bar. | 4px |
| Fill Color | Colour of the progress fill. | #6366f1 |
| Track Color | Colour behind the fill. | rgba(0,0,0,0.08) |
| Borders | Border and radius for the bar. | — |
| Ring | ||
| Corner | Bottom Right, Bottom Left, Top Right or Top Left. | Bottom Right |
| Size | Width and height of the ring. | 64px |
| Offset from edge | Distance from the corner of the screen. | 24px |
| Thickness | Stroke width of the ring. | 8 |
| Line Ends | Round or Flat ends on the progress line. | Round |
| Progress Color | Colour of the progress line. | #6366f1 |
| Track Color | Colour of the full circle behind it. | rgba(0,0,0,0.12) |
| Background | Fill colour inside the ring. | transparent |
| Readout | ||
| Typography | Text styles for the percentage and time readout. | — |
| Background | Background of the readout label. | rgba(0,0,0,0.75) |
| Borders | Border and radius for the readout label. | — |
| Options | ||
| Z-Index | Stacking order, so it sits above headers and other fixed items. | 9999 |
Anywhere. The bar and ring are fixed to the screen, so the element can sit at the top of your post template and still show at the edge of the window.
The class or ID of the element that holds the article text, for example .bde-post-content. If the selector is empty or does not match, it falls back to measuring the whole page.
It counts the words in the article (or the page if no selector is set), divides them by the Words per minute setting, and reduces the number as the reader scrolls.
It uses a z-index of 9999 by default, which is above most headers. Lower the Z-Index setting if you want your header or a popup to sit above it.
The percentage and time readout is hidden from screen readers so it is not read out on every scroll. With click to top on, the indicator becomes a button labelled Back to top that works with Enter and Space, and the scroll respects the reduced motion setting.
Reading Progress is included with Phox Elements, along with 150+ other premium elements for Breakdance.