.progressbar {
    width: 14px;
    height: 100px;
    position: absolute;
    bottom: 5rem;
    left: 1.5rem;
    background: #fff;
    border: 3px solid #333;
    border-bottom: 0;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    z-index: 3;
}

.white-circle {
    position: absolute;
    z-index: 0;
    bottom: 3.19rem;
    left: 1.05rem;
    width: 30px;
    border: 8px solid #fff;
    height: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.black-circle {
    display: block;
    width: 37px;
    height: 37px;
    position: absolute;
    bottom: 2.96rem;
    left: .82rem;
    background: red;
    border: 5px solid #333;
    -webkit-border-radius: 37px;
    -moz-border-radius: 37px;
    border-radius: 37px;
}

.progressbar-value {
    position: absolute;
    display: block;
    border: 0;
    width: 4px;
    height: 100px;
    bottom: 4.55rem;
    left: 1.82rem;
    overflow: hidden;
    text-indent: -30px;
    background: red;
    z-index: 4;
}

.progressbar-cover {
    position: absolute;
    display: block;
    width: 8px;
    height: 110px;
    border: 0;
    left: 0;
    bottom: 0%;
    background: #ccc;
}