meter {
  margin: 0.8em auto 0.4em;
  width: 100%;
  height: .5em;
}

meter[value="1"]::-webkit-meter-optimum-value {
  background: -moz-linear-gradient(top, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$danger', endColorstr='$danger',GradientType=0 );
  /* IE6-9 */
}

meter[value="2"]::-webkit-meter-optimum-value {
  background: -moz-linear-gradient(top, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdb0f', endColorstr='#fbdb0f',GradientType=0 );
  /* IE6-9 */
}

meter[value="3"]::-webkit-meter-optimum-value {
  background: -moz-linear-gradient(top, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$warning', endColorstr='$warning',GradientType=0 );
  /* IE6-9 */
}

meter[value="4"]::-webkit-meter-optimum-value {
  background: -moz-linear-gradient(top, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$success', endColorstr='$success',GradientType=0 );
  /* IE6-9 */
}

meter[value="1"]::-moz-meter-bar {
  background: -moz-linear-gradient(top, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #dc3545 0%, #eb8c95 15%, #dc3545 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$danger', endColorstr='$danger',GradientType=0 );
  /* IE6-9 */
}

meter[value="2"]::-moz-meter-bar {
  background: -moz-linear-gradient(top, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #fbdb0f 0%, #fdea73 15%, #fbdb0f 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdb0f', endColorstr='#fbdb0f',GradientType=0 );
  /* IE6-9 */
}

meter[value="3"]::-moz-meter-bar {
  background: -moz-linear-gradient(top, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffc107 0%, #ffdb6d 15%, #ffc107 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$warning', endColorstr='$warning',GradientType=0 );
  /* IE6-9 */
}

meter[value="4"]::-moz-meter-bar {
  background: -moz-linear-gradient(top, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #28a745 0%, #5dd879 15%, #28a745 40%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$success', endColorstr='$success',GradientType=0 );
  /* IE6-9 */
}

meter::-webkit-meter-optimum-value {
    transition: width .2s ease-out;
}