<div class="thermometer">
  <div class="fill"></div>
  <div class="lines">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
*{
  margin:0;
}

body{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}

/* body::after{
  content:"";
  position:absolute;
  background: linear-gradient(to bottom, #e70e02, #ff7b00,#ffb700, #90e0ef, #0096c7);
  bottom:0;
  width:100%;
  height:500%;
  z-index:1;
  transform-origin:150%;
  animation: sky 10s infinite ease-in-out;
}

@keyframes sky{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(50%);
  }
} */

.thermometer{
  width:10vw;
  height: 10vw;
  border:1vw solid;
  border-radius:50%;
  position:relative;
  background:#fff;
  display:flex;
  justify-content:center;
  margin-top:15vw;
  z-index:2;
}

.thermometer::before{
  content:'';
  position:absolute;
  border:1vw solid;
  width: 5.5vw;
  height: 20vw;
  background:#fff;
  top:-20.5vw;
  border-bottom:0;
  border-radius:3.5vw 3.5vw 0 0;
}

.thermometer::after{
  content:'';
  position:absolute;
  width:5.55vw;
  background:#fff;
  top:-2vw;
  height:5vw;
}

.fill{
  width:8vw;
  height:8vw;
  border-radius:50%;
  background: red;
  z-index:2;
  position:absolute;
  top:1vw;
  display:flex;
  justify-content:center;
  align-items:center;
}

.fill::before{
  content:'';
  position:absolute;
  width:4vw;
  height: 3.5vw;
  background:red;
  bottom:7vw;
  border-radius:1.8vw 1.8vw 0 0;
}

.fill::after{
  content:'';
  background:transparent;
  border:.8vw solid #fff;
  width:2vw;
  height:2vw;
  z-index:3;
  border-radius:0 6vw 0 0;
  position:absolute;
  right:.5vw;
  border-left:0;
  border-bottom:0;
  transform:rotate(45deg);
  
}

.lines{
  position:absolute;
  left: 100%;
  bottom:9.5vw;
}

.lines div{
  width:5vw;
  height:1vw;
  background:#000;
  margin:1.2vw 0;
}

.lines div:nth-child(even){
  width:3vw;
}

.fill{
  animation: temperature 10s linear infinite;
}

.fill::before{
  animation: 
    level 10s infinite ease-in-out, 
    temperature 10s linear infinite;
}

@keyframes temperature{
  0%,100%{
    background:#014fa1;
  }
  50%{
    background:red;
  }
}

@keyframes level{
  0%,100%{
    height:3vw;
  }
  50%{
    height:21vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.