CSS Price Thermometer

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and Javascript

On hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.

Thumbnail
This awesome code was written by tbloncar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tbloncar ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Price Thermometer</title>
  <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Abel' />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Price Thermometer by <span>Travis Loncar</span></p>


<h1>Price Thermometer</h1>

<div class="pricing-box">
  <div class="pricing-thermo">
    <!-- Thermometer -->
		<div class="pricing-total">
		</div>
    <!-- Price -->
		<div class="pricing-number">
		Starting at $500
		</div>
	</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tbloncar/css-price-thermometer-bouAh */
body {
  background: #CCC;
}

p {
  font-family: 'Abel', sans-serif;
  display: block;
  padding: 10px;
}

span {
  color: rgba(255,51,0,0.85);
}

h1 {
  font-family: 'Abel', sans-serif;
  text-align: center;
  margin: 50px;
  color: #222;
}

.pricing-thermo {
  background: #EEE;
  width: 50%;
  height: 60px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  margin: 50px auto;
	padding: 3px;
}

.pricing-total {
	height: 100%;
	background: rgba(255,51,0,0.85);
  -webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	width: 15%;
	margin-right: 10px;
	float: left;
	-webkit-transition: width 0.4s ease-in-out;
	-moz-transition: width 0.4s ease-in-out;
	-o-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;

}

.pricing-number {
	font-family: 'Arial', sans-serif;
	color: rgba(0,0,0,0.6);
	height: 30px;
	width: 130px;
	padding: 7px 0 0 0;
  text-align: center;
	background: #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	margin-top: 12px;
	float: left;
	display: none;
  font-size: 14px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -o-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
}

.pricing-box:hover .pricing-number {
	display: block;
}

.pricing-box:hover .pricing-total {
	width: 60%;
}

Comments