<template>
  <div
    class="nus_loadingl"
    @click="_onClick"
    @tap="_onTap">
    <div
        class="nu_loading-icon"
        :style="{width: mySize}">
        <div
            class="nu_loading">
            <div
                class="nu_loading-line">
                <slot name="hook_line">
                    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient x1="100%" y1="0%" x2="0.03%" y2="0%" :id="fillId">
                                <stop stop-color="currentColor" stop-opacity="0" offset="0%"></stop>
                                <stop stop-color="currentColor" offset="100%"></stop>
                            </linearGradient>
                        </defs>
                        <g
                            stroke="none"
                            stroke-width="5%"
                            fill="none"
                            fill-rule="evenodd">
                            <path
                                d="M3,36 a33,33 0 1 1 66,0"
                                stroke="currentColor">
                            </path>
                            <path
                                d="M3,36 a33,33 0 1 0 66,0"
                                :stroke="'url(#' + fillId + ')'">
                            </path>
                        </g>
                    </svg>
                </slot>
            </div>
            <div class="nu_loading-logo">
                <div class="nu_icon-box">
                    <slot>
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M562.678 663.994c-13.093 0-24.344 8.811-28.013 21.855l-82.768 276.73H261.405l100.34-339.839c8.145-29.264 33.302-48.93 62.596-48.93h497.617v277.203c0 19.11 14.603 34.656 32.555 34.656H1024v76.91H809.45c-48.26 0-87.587-41.849-87.664-93.28l-0.216-205.305H562.678zM241.965 393.712l-0.773 433.958c-0.14 80.03-61.378 145.154-136.51 145.154H0V895.94h18.893c17.95 0 32.553-15.542 32.553-34.669V266.585c0-60.352 46.08-109.444 102.715-109.444h208.813l-0.116-50.392c-0.025-16.529 6.839-32.142 18.814-42.847C390.934 55.574 403.482 51 416.992 51h563.033l-14.945 62.224H554.214v43.917h397.987c16.418 0 31.87 6.865 43.541 19.315 11.674 12.448 18.08 28.94 18.04 46.445l-0.392 170.811H836.649l0.204-146.387H554.214v69.517H793.16l0.14 76.87H554.214v69.543h426.09v76.896h-567.09c-13.209 0-25.781-5.758-35.385-16.22-9.11-9.894-14.335-23.801-14.35-38.17l-0.164-92.049h-121.35z m0.329-146.387l-0.177 69.517H363.19l-0.104-69.517H242.294z"
                                fill="currentColor">
                            </path>
                        </svg>
                    </slot>
                </div>
            </div>
        </div>
    </div>
    <nu-tag
        class="nu_loading-text"
        v-if="nameText"
        :nameText="nameText">
    </nu-tag>
</div>
</template>

<script>
import LoadingTmp from '../_comm/LoadingTmp';
import NuTag from '../../tag';
export default {
    extends: LoadingTmp,
    name: 'NuLoadingl',
    components: {
        NuTag
    }
};
</script>
<style lang='scss'>
@import '../../../../_assets/style/_iconFont.scss';
@import '../../../../_assets/style/_var.scss';
@import '../../../../_assets/style/_mixin.scss';
.nus_loadingl {
    color: $nuloadingl-color;
    box-sizing: border-box;
    display: inline-block;
    .nu_loading-icon{
        width: $nuloadingl-size;
        margin: 0 auto;
    }
    .nu_loading{
        color: inherit;
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        overflow: hidden;
    }
    .nu_loading-line,.nu_loading-logo{
        position: absolute;
        color: inherit;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        transform-origin: 50% 50%;
        font-size: 0;
    }
    .nu_loading-line {
        animation: nu_spinner-spin-loadingl 0.8s infinite linear;
    }
    .nu_loading-logo {
        padding: 25%;
    }
    .nu_icon-box{
        position: relative;
        width: 100%;
        height: 100%;
        line-height: 1;
        font-size: 0;
    }
    .nu_loading-text{
        margin-top: 6%;
        width: 100%;
        overflow: hidden;
        color: inherit;
        border-color:transparent;
        font-size: $nuloading-fontsize;
    }
    @include spinnerSpin('loadingl');
}
</style>
