<template>
  <div
    class="bx-loading"
    :style="style"
    >
    <span class="bx-loading-spinner">
      <i
        v-for="n in 12"
        :key="n"
        class="bx-loading-wire"
        />
    </span>
  </div>
</template>
<script>
import { create } from '../utils'

export default create({
  name: 'loading',
  props: {
    size: {
      type: String,
      default: '19px',
    },
  },
  computed: {
    style() {
      const { size } = this
      let sizeValue
      if (Number.isNaN(Number(size))) {
        sizeValue = size
      } else {
        sizeValue = `${size}px`
      }

      return {
        width: sizeValue,
        height: sizeValue,
      }
    },
  },
})
</script>
<style>
@import './index.css';
</style>
