.meter { height: 15px; /* Can be anything */ position: relative; background: none !important; > span { display: block; height: 100%; border-radius: 3px; background-color: var(--green3-c); background-image: linear-gradient( to left top, color-stop(0, var(--green3-c)), color-stop(1, var(--green2-c))); position: relative; overflow: hidden; } &.orange > span { background-color: #f1a165; background-image: linear-gradient(#f1a165, #f36d0a); } &.blue > span { background-color: var(--blue1-c); background-image: linear-gradient(var(--blue1-c), var(--blue3-c)); } &.red > span { background-color: var(--red1-c); background-image: linear-gradient(var(--red1-c), var(--red3-c)); } > 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; }