jdan / 98.css

A design system for building faithful recreations of old UIs
https://jdan.github.io/98.css
MIT License
9k stars 296 forks source link

Progress indicator (a.k.a. progress bar control) #170

Closed juanigaray closed 11 months ago

juanigaray commented 1 year ago

Closes #18

I'm salvaging this PR from 2020 and this PR, as both were closed after the migration from masterto main.

I ended up simplifying the implementation and solving a few issues such as the borders not being those seen on Windows 98 screenshots.

One thing that neither of those PRs have is a way to make the blue blocks discrete (there should never be half a block in the middle of a progress indicator). However, as long as the CSS round() function isn't implemented, I do not believe that there is a way to solve this and keep respecting the aspect ratio of the blocks in the segmented version of the progress bar.

Sadly I was unable to save the HTML <progress> implementation, which would've been more semantically correct.

I looked up screenshots and the blocks in the are sometimes 8x12 px with 2px separation OR 6x9 px with 2px separation. I have implemented only the 8x12 version at this time.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
98css ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 18, 2023 2:13pm