Gooey loading bar with plain CSS (+ Interaction with JS)

Anwesh Gangula — Fri, 11 Jun 2021 15:13:22 +0000

Loading bars are everywhere, they are one of the essential components of the modern world applications. So why to make them boring when you can add interactivity. Although there are existing tools which can help in this, we are going to use plain CSS, that too under 30 lines of code.

The essential components of this approach are filter: contrast(50); , filter: blur(15px); & @keyframes

On top of it, you can add interaction to the loading bar by using jQuery's draggable() function.

Check out the codepen below for demo.

Switchable theme based Favicons

Anwesh Gangula — Fri, 11 Jun 2021 14:41:39 +0000

SVG is by far the best option for any logo specific requirements. And the same applies for favicons too.

Another benefit of using SVG as a favicon is that you can have dynamic favicon that changes color based on users system preference - Dark Mode or Light Mode. And you don't even have to maintain multiple files.

You can use inline CSS within your SVG file to dynamically change the colors while the SVG is being loaded. In fact, you can use this SVG anywhere else in your project and it will still be dynamic without any additional changes.

To test it out, all you need is to save the below SVG (which is just a circle) in your project and add it to your HTML as favicon like so <link rel="icon" href="svgfile.svg" />

<svg viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="350">

    <style>
        circle {
        fill: white;
        }

        @media (prefers-color-scheme: light) {
          circle {
          fill: black;
          }
        }
    </style>

<circle cx="150" cy="150" r="150"  />
</svg>

Add favicon in your HTML code like below

<head>
  <link rel="icon" href="svgfile.svg" />
  ...
</head>

Additional References:

Dark Mode Favicons - CSS Tricks

DEV Community: Anwesh Gangula

Gooey loading bar with plain CSS (+ Interaction with JS)

Switchable theme based Favicons

Additional References: