input#amazing(type="radio" checked name="rating")
label(for="amazing") Amazing

input#good(type="radio" name="rating")
label(for="good") Good

input#notBad(type="radio" name="rating")
label(for="good") Not bad!

input#okay(type="radio" name="rating")
label(for="okay") Okay

input#youSuck(type="radio" name="rating")
label(for="youSuck") You suck

label

div#container
  div#gauge
    div#dial
  div#rating
    div#turtle 🐢
    div#feedback
    div#rabbit 🐇
View Compiled
#amazing:checked  {
  & ~ #container {
    #gauge #dial {
      transform: rotate(70deg); 
    }
  }
}

#good:checked {
  & ~ #container {
    #gauge #dial {
      transform: rotate(30deg);
    }
    
    #rating #feedback::after {
      margin-top: -40px; 
    }
  }
}

#notBad:checked {
  & ~ #container {
    #gauge #dial {
      transform: rotate(15deg);
    }
    
    #rating #feedback::after {
      margin-top: -80px; 
    }
  }
}

#okay:checked ~ #container #rating #feedback::after { 
   margin-top: -120px;
}

#youSuck:checked {
  & ~ #container {
    #gauge #dial {
      transform: rotate(-50deg);
    }
    
    #rating #feedback::after {
      margin-top: -280px; 
    }
 
    
  }
}

#gauge {
  height: 150px;
  overflow: hidden;
}

#dial {
  background: #0000ff80;
  width: 300px;
  height: 300px;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 1s;  
}

#dial::before {
  background: green;
  content: '';
  width: 50%;
  height:100%;
  display: block;
  justify-self: start;
}

#dial::after {
  background: #fff;
  content: '';
  width: 80%;
  height: 80%;
  display: block;
  justify-self: end;
  align-self: center;
  margin-left: -40%;
  border-radius: 50%;
}

@keyframes rotating {
  from {
    transform: rotate(70deg);
  }
  to {
    transform: rotate(-70deg);
  }
}



#rating {
  font-size: 30px;
  display: flex;
  width: 300px;
  flex-direction: row;
  justify-content: space-between;
}

#feedback {
  height: 40px;
  font: 20px;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}

#feedback::after {
  display: inline-block;
  white-space: pre-wrap;
  content: 'Amazing! \A Good! \A Not bad! \A Okay \A  You suck';
}

#container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

label::after {
  content: '\A ';
  white-space: pre-wrap;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.