.progress
    width 150px
    height 150px
    line-height 150px
    background none
    margin 0 auto
    position relative

.progressafter
    content ""
    width 100%
    height 100%
    border-radius 50%
    border 12px solid off-white
    position absolute
    top 0
    left 0

.progress > span
    width 50%
    height 100%
    overflow hidden
    position absolute
    top 0
    z-index 1

.progress .progress-left
    left 0

.progress .progress-bar
    width 100%
    height 100%
    background none
    border-width 12px
    border-style solid
    position absolute
    top 0

.progress .progress-left .progress-bar
    left 100%
    border-top-right-radius 80px
    border-bottom-right-radius 80px
    border-left 0
    -webkit-transform-origin center left
    transform-origin center left

.progress .progress-right
    right 0

.progress .progress-right .progress-bar
    left -100%
    border-top-left-radius 80px
    border-bottom-left-radius 80px
    border-right 0
    -webkit-transform-origin center right
    transform-origin center right
    animation loading-1 1.8s linear forwards

.progress .progress-value
    display flex
    justify-content center
    align-items center
    width 90%
    height 90%
    border 10px solid off-white
    border-radius 50%
    font-size 24px
    color off-white
    line-height 135px
    text-align center
    position absolute
    top 5%
    left 5%


.progress.blue .progress-bar
    border-color blue

.progress.blue .progress-left .progress-bar
    animation loading-2 1.5s linear forwards 1.8s

@keyframes loading-1
    0%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)

    100%
        -webkit-transform rotate(180deg)
        transform rotate(180deg)

@keyframes loading-2
    0%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)

    100%
        -webkit-transform rotate(144deg)
        transform rotate(144deg)

@keyframes loading-3
    0%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)

    100%
        -webkit-transform rotate(90deg)
        transform rotate(90deg)

@keyframes loading-4
    0%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)

    100%
        -webkit-transform rotate(36deg)
        transform rotate(36deg)

@keyframes loading-5
    0%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)

    100%
        -webkit-transform rotate(126deg)
        transform rotate(126deg)