<template>
    <MyRect :class="[$style.ringRoller,disableRolling&&$style.disableRolling,hiddenBg&&$style.hiddenBackground]">
        <div :class="$style.content">
            <div :class="$style.ring" :style="{borderColor:color?` ${color} transparent ${color} transparent`:''}"></div>
        </div>
    </MyRect>
</template>

<script>
    import MyRect from "../graph/Rect";
    export default {
        name: "RingRoller",
        components: {MyRect},
        props:{
            disableRolling:{
                type:Boolean,
                default:false
            },
            hiddenBg:{
                type:Boolean,
                default:false
            },
            color:{
                type:String,
                validator:function(v){
                    let hex=new RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/),
                        rgba=new RegExp(/^[rR][gG][Bb][Aa]?[\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?(0\.\d{1,2}|1|0)?[\)]{1}$/);
                    return hex.test(v)||rgba.test(v);
                }
            }
        }
    }
</script>

<style module lang="scss">
    @value Loading from '../../cssInjection/stylization.scss';
    @import '../../cssInjection/cssLayout.scss';
    .ringRoller{
        width: 80%;
        max-width: 40px;
        max-height: 40px;
        background:rgba(255,255,255,1);
        box-shadow:0PX 4PX 8PX 0PX rgba(247,247,247,1);
        border-radius:6PX;
        margin: 0;
        @extend %AbsoluteCenter;
        &.disableRolling{
            .content>.ring{
                animation: none !important;
            }
        }
        &.hiddenBackground{
            background:rgba(0,0,0,0);
            box-shadow:none;
        }
        .content{
            position: relative;
            width:100%;
            height:100%;
            @keyframes lds-dual-ring {
                0% {
                    -webkit-transform: rotate(0);
                    transform: rotate(0);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
            animation: lds-dual-ring 1s linear infinite;
            >.ring{
                @extend %AbsoluteCenter;
                width: 60%;
                height: 60%;
                border-radius: 50%;
                border-width: 2.5PX;
                border-style: solid;
                border-color: Loading transparent;
            }
        }
    }
</style>