$circle_circumstance: ( 2 * (22 / 7) * 40 );
$progress_size : 60px;
.circular-progress { 
	position: relative;
	display: inline-block;
    width:$progress_size;
    height:$progress_size;
    border-radius: 50%;
    svg {
        transform: rotate(270deg);
    }
    circle {
        stroke-width: 5;
        fill: none;
            stroke-linecap: round;
    }
    circle:nth-of-type(1) {
        stroke: $color_light_gray;
    }
    circle:nth-of-type(2) {
        stroke-dasharray: $circle_circumstance;
        stroke-dashoffset: ( 0.3 * $circle_circumstance );
    }
	.#{$prefix}-progress-percent{
		position: absolute;
		top: 50%;
		left: 50%;
        @include transition();
		@include transform(translate( -50% , -50% ));
        font-size: 14px;
	}
}

.#{$prefix}-scroll-top{
    position: fixed;
    right: 30px;
    bottom: -100px;
    z-index: 2;
    width: $progress_size;
    height: $progress_size;
    line-height: $progress_size;
    text-align: center;
    border-radius: 100%;
    font-size: 18px;
    cursor: pointer;
    @include transition();
    &:after{
        content:'';
        display: inline-block;
        width: 45px;
        height: 45px;
        position: absolute;
        left: 50%;
        top: 50%;
        @include transform(translate(-50%,-50%));
        z-index: -1;
        background-color: $color_white;
        border-radius: 100%;
    }
    .#{$prefix}-icon{
		position: absolute;
		top: 50%;
		left: 50%;
        @include transition();
		@include transform(translate( -50% , -50% ));
        opacity: 0;
	}
    &.show{
        bottom: 60px;
    }
    &:hover{
        .#{$prefix}-icon{
            opacity: 1;
        }
        .#{$prefix}-progress-percent{
            opacity: 0;
        }
    }
}