body {
    background-color: #ECF0F1;
}

.position {
    float: left;
    margin: 100px 20px;
}

.progress-bar {
    position: relative;
    height: 160px;
    width: 160px;
    margin: auto;
}

    .progress-bar div {
        position: absolute;
        height: 160px;
        width: 160px;
        border-radius: 50%;
    }

        .progress-bar div span {
            position: absolute;
            font-family: 'Open Sans',Arial,Sans-Serif;
            font-size: 25px;
            line-height: 135px;
            height: 135px;
            width: 135px;
            left: 12.5px;
            top: 12.5px;
            text-align: center;
            border-radius: 50%;
            background-color: white;
        }

    .progress-bar .background {
        background-color: #b3cef6;
        top: 0px !important;
        left: 0px !important;
        opacity: 1;
    }

    .progress-bar .rotate {
        clip: rect(0 80px 160px 0);
        background-color: #4b86db;
    }

    .progress-bar .left {
        clip: rect(0 80px 160px 0);
        opacity: 1;
        background-color: #b3cef6;
    }

    .progress-bar .right {
        clip: rect(0 80px 160px 0);
        transform: rotate(180deg);
        opacity: 0;
        background-color: #4b86db;
    }

@keyframes toggle {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}