# Progress bar design process notes, 5/18/26

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_2.png" width=500px>
</p>

As of earlier today, the provisional design for the progress bar
I had was just a radial gradient, something I sketched out a few
days ago:

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_3.png" width=500px>
</p>

The CSS I used for the `background` radial gradient is:

```css
radial-gradient(circle,
                #ad5cb087 0%,
                #c225c779 81%,
                rgba(169, 87, 199, 0.05) 87%,
                #0000 100%);
```

(The `#xxxxxxxx`-style color stops I wrote at least in part with
[Vim](https://www.vim.org/), and the `rgba(255, 255, 255,
1.0)`-style color stop I used the Firefox color picker for.)

The softness of the edge depends on the width of the element the
gradient is applied to (i.e. the progress bar element), so I was
expecting to modify this based on whatever the actual width of
the progress bar needed to be. I'm storing these arguments to
CSS's `background` as part of the data associated with each
"progress bar stop" in the application's database.

Anyway, after having launched the fundraiser this morning, this
evening I set out to do the first update of the progress bar
based on actual data. When I went to tweak the CSS based on the
actual progress bar width value we ended up with, I decided I
wanted to do something with a little more pizazz than my
provisional sketch above.

First, I messed around with the radial gradient until I had this:

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_4.png" width=500px>
</p>

I used a mixture of Firefox paint picker and editing by hand for
this, whatever suited my purposes best in the moment. I asked
Lily for her opinion at certain points and she gave me the
overall impression that she liked a "more 3D" look, which I took
into account.

```css
radial-gradient(circle,
                rgba(223, 118, 255, 0.87)    0%,
                rgba(216,  16, 223, 0.4)    30%,
                rgba(216,  16, 223, 0.02)   40%,
                rgba( 94,  32,  96, 0.28)   40%,
                rgba( 94,  32,  96, 0.28)   50%,
                rgba(194,  37, 199, 0.286)  80%,
                rgba(179, 179,  60, 0.33)   85%,
                rgba( 94,  54, 108, 0.01)   90%,
                rgb( 123, 123,  35)        100%);
```

I felt like it still needed something extra after this, so I drew
this overlay for it in the free paint program
[Krita](https://krita.org/en/), using a [Marble
Mouse](https://wiki.archlinux.org/title/Logitech_Marble_Mouse),
in about 45 m.:

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_5.png" width=500px>
</p>

I've included the Krita project folder as part of the download.
It's for a rather old version of Krita (4.14…I keep meaning to
try Krita 5 but I haven't yet, and I at least know I like this
version).

I used mainly the built-in pencil and paintbrush tools, always at
varying levels of semitransparency and varying widely in
diameter, with the blend modes "Addition", "Normal", "Burn", and
"Color Dodge".

These are the 5 layers of the Krita file, from highest to lowest:

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_overlay_layer_5.png" width=500px>
  <img src="/pics/progress_bar_2026-05-18_overlay_layer_4.png" width=500px>
  <img src="/pics/progress_bar_2026-05-18_overlay_layer_3.png" width=500px>
  <img src="/pics/progress_bar_2026-05-18_overlay_layer_2.png" width=500px>
  <img src="/pics/progress_bar_2026-05-18_overlay_layer_1.png" width=500px>
</p>

Here's the new CSS `background`, incorporating the overlay:

```css
radial-gradient(circle,
                rgba(223, 118, 255, 0.87)    0%,
                rgba(216,  16, 223, 0.4)    30%,
                rgba(216,  16, 223, 0.02)   40%,
                rgba( 94,  32,  96, 0.28)   40%,
                rgba( 94,  32,  96, 0.28)   50%,
                rgba(194,  37, 199, 0.286)  80%,
                rgba(179, 179,  60, 0.33)   85%,
                rgba( 94,  54, 108, 0.01)   90%,
                rgb( 123, 123,  35)        100%),

center/260% repeat url(/orb_overlay_01.png);
```

The aspect ratio of the progress bar element at the time of this
writing is 0.704167:1.

The final result:

<p class="post-imgs">
  <img src="/pics/progress_bar_2026-05-18_6.png" width=500px>
</p>
