Icon bar

Started to look at the various how-to entries for html
on the W3 Schools site. The first, icon bar, uses the
Font Awesome site as reference. This library of icons seems
to be the most popular one, with many free icons for everyday use.
They are not the best looking, but they are the most clear with
respect to meaning, which is essential. Played a bit with the try-it:

The bar is now smaller, with differently colored icons. The icons can
be styled - see the globe - which is nice.

The !important mention, when it is used, gives absolute priority to
the style element. This practice is not encouraged (better use this for testing).
The concern is that a user might be visually impaired and need to change things; this
would override any changes.

Tried the transition speed at step-start but it is abrupt (step-end is sticky),
so went back to ease.

                                             *     *     *

The loader is a well-known sight to internet users. That little circle that tells
one to wait patiently while our turn comes to load a page. Many of these are ready-made,
but it also becomes interesting to make from the ground up. Below, one such from
W3Schools, with a second version helping us to appreciate what is going on.

In effect, one is creating the rounded corner of a square figure(from a div), which
one rotates 360 degrees with a transition command. In effect, rather simple.

Another useful piece of code: reloading a picture:

The reload is very rapid. Although clicking a refresh all might take more time.