:host() {
    display: flex;
    flex-direction: row;
    .value {
        font-size: 12px;
        padding: 0 10px;
    }
    .bar {
        flex: 1;
        height: 18px;
        overflow: hidden;
        border-radius: 4px;
        background-color: #f6f6f6;
        box-shadow: 0 0 1px 0 #ccc;
        >* {
            height: 100%;
            transition: width 300ms ease;
            background-color: #40bda6;
        }
    }
    &.striped>.bar>*{
        background-size: 40px 40px;
        background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    }
    &.animation>.bar>*{
        animation: progress-bar-stripes 2s linear infinite;
    }
}
@keyframes progress-bar-stripes {
    0% {background-position: 40px 0;}
    100% {background-position: 0 0;}
}