components blah

by Nicholas Berlette

HTML

<div align="center">
<label for="fuel">⛽️</label>

<meter id="fuel"
       min="0" max="100"
       low="30" high="70" optimum="80"
       value="30">
    at 50/100
</meter>

<p aria-busy="true" aria-describedby="progress-bar">
  Please wait...
</p>

<progress id="progress-bar"></progress>

</div>
<style>
body {
  margin: 10rem auto;
  text-align: center;
}
label {
    font-size: 4rem;
    display: block;
    padding: 0.5rem;
}

meter {
  font-size: 3rem;
  text-align: center;
  margin: 0 0.5rem;
}

progress {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0.5rem;
  transition: all .3s;
}
</style>