<template>
    <div class="dv-loading">
        <svg width="50px" height="50px">
            <circle class="dv-loading-circle-outer"
                    cx="25"
                    cy="25"
                    r="20"
                    fill="transparent"
                    stroke-width="3"
                    stroke-dasharray="31.415, 31.415"
                    stroke-linecap="round">
                <animateTransform
                        attributeName="transform"
                        type="rotate"
                        values="0, 25 25;360, 25 25"
                        dur="1.5s"
                        repeatCount="indefinite"/>
            </circle>
            <circle class="dv-loading-circle-inner"
                    cx="25"
                    cy="25"
                    r="10"
                    fill="transparent"
                    stroke-width="3"
                    stroke-dasharray="15.7, 15.7"
                    stroke="#3be6cb"
                    stroke-linecap="round">
                <animateTransform
                        attributeName="transform"
                        type="rotate"
                        values="360, 25 25;0, 25 25"
                        dur="1.5s"
                        repeatCount="indefinite"/>
            </circle>
        </svg>
        <div class="screen-loading-tip">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DvLoading'
};
</script>
