<template>
    <div class="we-no-result">
        <div class="preloader-2">
            <span class="line line-1"></span>
            <span class="line line-2"></span>
            <span class="line line-3"></span>
            <span class="line line-4"></span>
            <span class="line line-5"></span>
            <span class="line line-6"></span>
            <span class="line line-7"></span>
            <span class="line line-8"></span>
            <span class="line line-9"></span>
        </div>
        <div class="Fa"> {{ textFa }} </div>
        <div class="En"> {{ textEn }} </div>
    </div>

</template>

<script>
    export default {
        props: {
            src:                { default: '/images/Global/Animated/Loading.gif' },
            textFa:             { default: " درحال دریافت اطلاعات... لطفا شکیبا باشید " },
            textEn:             { default: " GATHERING DATA, PLEASE BE PATIENT " },

        },
    };
</script>
<style lang="scss">
    .preloader-2 .line {
        width: 6px;
        height: 30px;
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(238,12,119,1) 100%, rgba(0,212,255,1) 100%);
        margin: 0 1px;
        display: inline-block;
        animation: opacity-2 1000ms infinite ease-in-out;
    }

    .preloader-1 .line-1, .preloader-2 .line-1 { animation-delay: 800ms; }
    .preloader-1 .line-2, .preloader-2 .line-2 { animation-delay: 600ms; }
    .preloader-1 .line-3, .preloader-2 .line-3 { animation-delay: 400ms; }
    .preloader-1 .line-4, .preloader-2 .line-4 { animation-delay: 200ms; }
    .preloader-1 .line-6, .preloader-2 .line-6 { animation-delay: 200ms; }
    .preloader-1 .line-7, .preloader-2 .line-7 { animation-delay: 400ms; }
    .preloader-1 .line-8, .preloader-2 .line-8 { animation-delay: 600ms; }
    .preloader-1 .line-9, .preloader-2 .line-9 { animation-delay: 800ms; }


    @keyframes opacity-2 {
        0% {
            opacity: 1;
            height: 25px;
        }
        50% {
            opacity: 0;
            height: 22px;
        }
        100% {
            opacity: 1;
            height: 25px;
        }
    }


    .we-no-result {
        text-align: center;
        padding: 10px;
        width: 100%;
    }
    .we-no-result img {
        width: 300px;
        border-radius: 150px;
    }
    .we-no-result .Fa {
        font-size: 18px;
    }

    .we-no-result .En {
        direction: ltr;
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
</style>
