Progress bars for my Booklog!

Just a small change that I wanted to make to my booklog section on my website to keep track of my reading progress!

For some reason, I didn’t know how to make progress bars in HTML!

Turns out it’s very simple, just use the <progress> element! Pretty well documented on the MDN web docs to be honest.

Simply by using something like the following:

<label for="progress">Progress:</label>
<progress id="progress" max="100" value="70">70%</progress>

We get something like this!

70%

So, in order to add that to my booklog, I simply had to add a progress variable to the YAML file I use on _data/books.yml like so:

- title: "Leviathan Wakes"
  author: "James S.A. Corey"
  cover: "/assets/img/books/leviathan-wakes.jpg"
  start: "2024-09-19"
  end: "In progress"
  progress: 16

And of course, style the bar, which was a bit of a pain at least for the filled portion of it.

progress::-moz-progress-bar { background: var(--border); }
progress::-webkit-progress-value { background: var(--border); }
progress {
    color: var(--border);
    height: 12px;
    width: 80%;
    border: 0px;
    background-color: var(--bg);
    border-radius: 8px;
}

And in the end, we end up with something like this!

70%

Here’s the complete liquid syntax for my booklog section! The complete file including the CSS styling can be found on my GitHub repo.

{% if site.data.books %}
  {% assign books_by_year = site.data.books | sort: 'end' | group_by_exp: "item", "item.end | date: '%Y'" %}
  {% for year_group in books_by_year reversed %}
  <h3>{{ year_group.name }}</h3>
  <div class="responsive-grid">
  {% for item in year_group.items reversed %}
  <div class="book-cover-container">
  <div class="book-cover">
  <img class="book-cover" src="{{ item.cover }}">
  </div>
  <div class="content">
      <div class="info">
      <div class="title"><i>{{ item.title }}</i></div>
      <div class="artist">by {{ item.author }}</div>
      <div class="dates">Started: {{ item.start }}</div>
      {% if item.progress < 100 %}
      <div class="dates">
      <label for="file">Progress: {{ item.progress }}%</label>
      <progress id="file" value="{{ item.progress }}" max="100">{{ item.progress }}%</progress>
      </div>
      {% else %}
      <div class="dates">Finished: {{ item.end }}</div>
      {% endif %}
      </div>
      </div>
      </div>
          {% endfor %}
  </div>
  {% endfor %}
{% endif %}

Once again, you can see the whole thing in action on my booklog. Now I just have to remember to update it often!

This is day 76 of #100DaysToOffload

Comments

If you have something to say, leave a comment, or contact me ✉️ instead

Reply via email Load comments
Reply via Fediverse

You can reply on any Fediverse (Mastodon, Pleroma, etc.) client by pasting this URL into the search field of your client:

https://fosstodon.org/@joel/113218921176017218