Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
progress.social-progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  position:relative;
}
progress.social-progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  position:absolute;
  left:0;
  right:0;
  top: 5px;
}
progress.social-progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress.social-progress::-webkit-progress-value {
  background-color: green;
}
progress.social-progress::-moz-progress-bar {
  background-color: green;
}
</style>
<body>

<progress class="social-progress" max="100" value="50" data-label="1450/2000 kcal"></progress>

</body>
</html>