circularprogress.less

@import 'mixins.less';

    @complete: #319d22; //colour of completed progress bar
    @incomplete: #9d2222; //colour of incomplete progress bar
    @inner: #c3c3c3; //colour of interior of circle
    @border: #c3c3c3; //colour of border round circle

    .progress {
        position:relative;
        padding-bottom:100%;
        
        .progressinner {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:@incomplete;
            .border-radius( 10000px );
            .border-box();
            overflow:hidden;
            border:solid 10px @border;
            //.box-shadow( 0 0 0 10px @border );

            .lpane,
            .rpane {
                content:"";
                position:absolute;
                top:-0.5%;
                left:-0.5%;
                width:50.5%;
                height:101%;
                overflow:hidden;
                .cover {
                    position:absolute;
                    top:-5%;
                    left:100%;
                    width:100%;
                    height:110%;
                    background:@complete;
                    .transform-point( 0% 50% );
                }
            }
            .rpane {
                left:49.5%;
                .cover {
                    left:auto;
                    right:100%;
                    .transform-point( 100% 50% );
                }
            }

            .display {
                position:absolute;
                top:5%;
                left:5%;
                width:90%;
                height:90%;
                .border-radius( 1000px );
                .border-box();
                background:@inner;
                text-align:center;
            }
        }

    }