.meter { height: 15px; /* Can be anything */ position: relative; background: none !important; > span { display: block; height: 100%; border-radius: 3px; background-color: #459442; background-image: linear-gradient( to left top, color-stop(0, #459442), color-stop(1, #81e27d)); position: relative; overflow: hidden; } &.orange > span { background-color: #f1a165; background-image: linear-gradient(#f1a165, #f36d0a); } &.blue > span { background-color: #85b0ee; background-image: linear-gradient(#85b0ee, #4865a5); } &.red > span { background-color: #ee5649; background-image: linear-gradient(#ee5649, #a5302a); } > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-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: 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; overflow: hidden; } } .animate > span:after { display: none; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } .noanimation > span > span, .noanimation > span:after { animation: none; } .nostripes > span > span, .nostripes > span:after { animation: none; background-image: none; }