*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    height: 100vh;
    background-color: rgb(20, 20, 20);
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrap-content{
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.hide{
    position: absolute;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background-color: rgb(20, 20, 20);
    z-index: 1;
    top: 30px;
    left: 30px;
}

.dot{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: rgb(69, 58, 231);
    animation: loading 1.5s linear infinite;
    top: 0px;
    left: 0px;
}

@keyframes loading {
    0%{
        background-color: rgb(69, 58, 231);
        top: 0%;
        left: 0%;
    }
    24%{
        background-color: rgb(69, 58, 231);
        left: calc(100% - 30px);
        top: 0%;
    }
    25%{
        background-color: rgb(69, 58, 231);
        left: calc(100% - 30px);
        top: 0%;
    }
    49%{
        left: calc(100% - 30px);
        top: calc(100% - 30px);
    }
    50%{
        left: calc(100% - 30px);
        top: calc(100% - 30px);
    }
    74%{
        left: 0%;
        top: calc(100% - 30px);
    }
}

.dot::after{
    position: absolute;
    top: 0px;
    right: 0px;
    content: '';
    width: 200%;
    height: 100%;
    background-color: rgb(0, 68, 255);
    z-index: -1;
    filter: blur(10px);
    animation: rotateAni 1.5s ease-in-out infinite;
}

@keyframes rotateAni {
    0%{
        background-color: rgb(69, 58, 231);
        top: 0%;
        left: -100%;
        width: 200%;
        height: 100%;
    }
    24%{
        background-color: rgb(69, 58, 231);
        top: -100%;
        left: 0%;
        width: 100%;
        height: 200%;
    }
    25%{
        background-color: rgb(69, 58, 231);
        top: -100%;
        left: 0%;
        width: 100%;
        height: 200%;
    }
    49%{
        top: 0px;
        right: -100%;
        width: 200%;
        height: 100%;
    }
    50%{
        top: 0px;
        right: -100%;
        width: 200%;
        height: 100%;
    }
    74%{
        top: 0px;
        right: 0%;
        width: 100%;
        height: 200%;
    }
}