A meter ahead

The meter element in HTML is similar to the progress element, but it's actually a bit simpler than its progressive counterpart. A meter is purely a "read" element meant to display a specific value or measurement, and it is not intended to be used for things like loading states. Important aspects: You need to specify a min="", a max="", and a value="". In principle, that's all you need, but to style it more beautifully, you'll need a bit more. It starts like this:

meter {
            width: 500px;
            height: 25px;
            -webkit-appearance: none; 
            }

You assign a width, height, and -webkit-appearance. This ensures that you can style the meter itself however you want. If you are using a browser that runs on Chromium, you need ::-webkit to make this work. This ensures that the default background is removed so you can choose your own background color:

meter::-webkit-meter-bar {
            background: none;
            background-color: hsl(0 0% 85%);
            border-radius: 1rem; }

But now we also want to style the actual value indicator of the meter. One way to do this is by styling the optimum-value, which we apply here like this:

meter::-webkit-meter-optimum-value {
            background: rgb(86 49 232);
            border-radius: 1rem; }

Once you've done this, you get a much "nicer" result. So, this is how you can get started with the meter element! And yes, you can also play around with corner shapes, just like I did.