<template>
  <svg class="n-loading-icon" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <circle class="circle" cx="50" cy="50" r="45" :stroke="color" stroke-width="12" stroke-linecap="round" fill="none">
      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1"></animateTransform>
      <animate attributeName="stroke-dasharray" repeatCount="indefinite" dur="1s" values="19 170;94 94;19 170" keyTimes="0;0.5;1"></animate>
    </circle>
  </svg>
</template>
<script>
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-loading-icon',
  props: {
    // 图标大小
    size: prop.stringNumber(100),
    // 颜色
    color: prop.string('#FFFFFF')
  }
}
</script>
