Back to blog overview

March 26, 2020

Build a Progress Bar in HTML & CSS

Trever Yarrish



Chief Experience Officer / Founding Partner
Grants Pass, OR

Hey, hey, readers! 

Take a look at what's been Creating Zeal this week!

📹 On YouTube

In this video, Amy Dutton explains how to code a Progress Bar in only HTML and CSS. She covers several nuances: 3 different states (finished, current, and future), a label over the current state, and a double ring around its dot. There are no images, just good, clean, semantic code.

🤔 Zeal Interestings

A collection of cool stuff the Zeal team found interesting this week.

CSS Can Influence Screen Readers

This article is an interesting read into accessibility and how CSS, a language used for presentation, can affect a screen reader. The following example is used:

The HTML mark-up is the same. Both are unordered lists. However, the CSS applied to the example on the right, not only removes the bullets visually, but also prevents a screen reader from saying the word "bullet". Hmm...

Remote Work Wiki

Due to unprecedented times, many find themselves thrown into remote work, with little to no training. The fine folks at Notion have put together a wiki:

👋A central hub for the best resources on remote work - A central hub for the best resources on remote work - from tips to articles to company policies. Designed to bring together the most actionable advice (and keep adding to it).

Perception, Reality, and the iPhone

In 2007, the iPhone completely changed how we think of phones and mobile devices. In 2013, six years later, the release of iOS7 drastically changed the user interface. Since then, updates and modifications have been minimal, but, these adaptations have integrated themselves into our everyday lives forever altering our sensory perception.

This article explores the evolution of the visual language and mental models that we rely on to interact with our devices.

Looking to join a stellar team of coders (or know someone who is)?

Check Out Available Positions!

Let's Chat

Are you ready to build something brilliant? We're ready to help.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RedwoodJS Logo

for builders

Grants Pass, Oregon • September 26 - 29, 2023
View All