Bear Blog 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.

Update the markup by hand whenever you start a new book, or drop the progress bar entirely if you'd rather keep it simple.

Preview

How to use

Copy the markup below and paste it where you want the widget to appear. Update the book title, author, link, and progress. When you start a new book, just update the HTML, for the progress bar, change the --progress value on the bar and the percentage text next to it.

If you have a link for the book, wrap the title in an <a> tag. If not, leave it as a plain <span>, either way it gets the same styling.

<div class="reading-widget">
    <div class="reading-widget-emoji">📚</div>
    <div class="reading-widget-content">
        <a href="https://example.com/your-book" class="reading-widget-title">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>

Without a link, just swap the <a> for a <span>:

<span class="reading-widget-title">Book Title</span>

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.

Styles

.reading-widget {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3em 1em;
    max-width: 34rem;
    margin-block: 1.5em;
    margin-inline: auto;
    padding-block: 1rem;
    padding-inline: 1.1rem;
    text-align: start;
    background-color: var(--code-background-color);
    border: 1px solid color-mix(in srgb, var(--text-color), transparent 78%);
    border-radius: 4px;
}

.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: color-mix(in srgb, var(--text-color), transparent 45%);
}

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

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

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

.reading-widget-author {
    display: block;
    font-size: 0.9em;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.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-color: color-mix(in srgb, var(--text-color), transparent 78%);
}

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

.reading-widget-pct {
    flex-shrink: 0;
    font-size: 0.8em;
    font-family: monospace;
    color: color-mix(in srgb, var(--text-color), transparent 45%);
}

Want more? Check out the full Bear Blog library.