Robert Birming

Currently reading widget

A simple card that shows the book you're reading, who wrote it, and a progress bar. No JavaScript, no API calls, no external dependencies. Just HTML and CSS.1

Preview

📚
The Bear William Faulkner
35%

How to use

  1. Copy the markup below and paste it where you want the widget to appear.
  2. Update the book title, author, link, and progress.
  3. Copy the styles and add them to your theme.

When you start a new book, just update the HTML. For the progress bar, change two things: the --progress value on the bar, and the percentage text next to it.

Markup

<div class="reading-widget">
  <div class="reading-widget-emoji">📚</div>
  <div class="reading-widget-content">
    <a href="https://example.com/your-book">Book Title</a>
    <span class="reading-widget-author">Author Name</span>
    <div class="reading-widget-progress">
      <div class="reading-widget-bar" style="--progress: 35%"></div>
      <span class="reading-widget-pct">35%</span>
    </div>
  </div>
</div>

Styles

/* Currently reading widget | robertbirming.com */
.reading-widget {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  max-width: 34rem;
  margin-block: var(--space-block);
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.1rem;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.reading-widget::before {
  content: "Currently reading";
  display: block;
  grid-column: 1 / -1;
  margin-block-end: 0.35em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.reading-widget-emoji {
  font-size: 2.7rem;
  line-height: 1.2;
  align-self: start;
}

.reading-widget-content a {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.reading-widget-content a:visited {
  color: var(--text);
}

.reading-widget-author {
  display: block;
  font-size: var(--font-small);
  color: var(--muted);
}

.reading-widget-progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 0.7em;
}

.reading-widget-bar {
  flex: 1;
  block-size: 0.25rem;
  border-radius: 0.125rem;
  background: var(--border);
}

.reading-widget-bar::after {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: var(--progress, 0%);
  border-radius: 0.125rem;
  background: var(--link);
}

.reading-widget-pct {
  flex-shrink: 0;
  font-size: 0.8em;
  font-family: var(--font-mono);
  color: var(--muted);
}

If you don't need the progress bar, just remove the reading-widget-progress div from the markup. You can also swap the emoji for whatever fits your style.

Want more? Check out the Bear library.

Happy blogging, and happy reading.

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩