/*CIRCULAR TYPE*/

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  text-align: center;
  margin-bottom:20px;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
  font-size:14px;
  color:#444;
}
.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size:14px;
}


/*BAR TYPE*/

.meter { 
  height: 30px;  /* Can be anything */
  position: relative;
  margin:0 0 10px 0; 
  width:100%;
  background: #FFF;
  border-top-left-radius:2px;
  border-top-right-radius:2px;
  border-bottom-left-radius:2px;
  border-bottom-right-radius:2px;
}
.meter > span {
  display: block;
  height: 100%;  
  background-color:#19B1DD;
  position: relative;
  overflow: hidden;
}
.meter > span:after, .animate > span > span {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: 
     -webkit-gradient(linear, 0 0, 100% 100%, 
        color-stop(.25, rgba(255, 255, 255, .2)), 
        color-stop(.25, transparent), color-stop(.5, transparent), 
        color-stop(.5, rgba(255, 255, 255, .2)), 
        color-stop(.75, rgba(255, 255, 255, .2)), 
        color-stop(.75, transparent), to(transparent)
     );
  background-image: 
    -moz-linear-gradient(
      -45deg, 
        rgba(255, 255, 255, .2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .2) 50%, 
        rgba(255, 255, 255, .2) 75%, 
        transparent 75%, 
        transparent
     );
  z-index: 1;
  -webkit-background-size: 50px 50px;
  -moz-background-size: 50px 50px;
  -webkit-animation: move 2s linear infinite;    
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}
.nostripes > span > span, .nostripes > span:after {
  -webkit-animation: none;
  background-image: none;
}