<template>
    <div class="we-no-result">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></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">
    .loading span {
        display: inline-block;
        vertical-align: middle;
        width: 1.2em;
        height: 1.2em;
        margin: .33em;
        background: var(--color-black);
        border-radius: .6em;
        animation: loading 1s infinite alternate;
    }

    /*
     * Dots Colors
     * Smarter targeting vs nth-of-type?
     */
    .loading span:nth-of-type(2) {
        background: var(--color-red);
        animation-delay: 0.1s;
    }
    .loading span:nth-of-type(3) {
        background: var(--color-orange);
        animation-delay: 0.2s;
    }
    .loading span:nth-of-type(4) {
        background: var(--color-purple);
        animation-delay: 0.3s;
    }
    .loading span:nth-of-type(5) {
        background: var(--color-pink);
        animation-delay: 0.4s;
    }
    .loading span:nth-of-type(6) {
        background: var(--color-blue);
        animation-delay: 0.5s;
    }
    .loading span:nth-of-type(7) {
        background: var(--color-cyan);
        animation-delay: 0.6s;
    }

    /*
     * Animation keyframes
     * Use transition opacity instead of keyframes?
     */
    @keyframes loading {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .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>
