seb86/Auto-Load-Next-Post

.meter {
    background: $lightgrey;
    height: 20px;
    position: relative;
    margin: 8px 0;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 4px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    box-shadow        : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter > span {
    display: block;
    height: 100%;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: $green;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $green), color-stop(1, #26b04a));
    background-image: -moz-linear-gradient(center bottom, $green 37%, #26b04a) 69%;
    -webkit-box-shadow: inset 0 2px 9px  rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 2px 9px  rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 9px  rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    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(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent) );
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
    background-size: 50px 50px;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.animate > span > span {
    animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
}

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

.blue > span {
    background-color: #658ef1;
    background-image: -moz-linear-gradient(top, #658ef1, $blue);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #658ef1), color-stop(1, $blue));
    background-image: -webkit-linear-gradient(#658ef1, $blue);
}

.orange > span {
    background-color: $lightorange;
    background-image: -moz-linear-gradient(top, $lightorange, $orange);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $lightorange), color-stop(1, $orange));
    background-image: -webkit-linear-gradient($lightorange, $orange);
}

.red > span {
    background-color: $lightred;
    background-image: -moz-linear-gradient(top, $lightred, $red);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $lightred), color-stop(1, $red));
    background-image: -webkit-linear-gradient($lightred, $red);
}

.yellow > span {
    background-color: $yellow;
    background-image: -moz-linear-gradient(top, $yellow, #f0dd30);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $yellow), color-stop(1, #f0dd30));
    background-image: -webkit-linear-gradient($yellow, #f0dd30);
}

@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

.nostripes > span > span, 
.nostripes > span::after {
    animation: none;
    -webkit-animation: none;
    background-image: none;
}