<template>
  <div class="page-spinner">
    <co-header fixed title="Spinner">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <co-cell title="snake" class="page-content-main">
        <co-spinner color="#26a2ff" type="snake"></co-spinner>
      </co-cell>

      <co-cell title="double-bounce">
        <co-spinner color="#26a2ff" type="double-bounce"></co-spinner>
      </co-cell>

      <co-cell title="triple-bounce">
        <co-spinner color="#26a2ff" type="triple-bounce"></co-spinner>
      </co-cell>

      <co-cell title="fading-circle">
        <co-spinner color="#26a2ff" type="fading-circle"></co-spinner>
      </co-cell>

      <co-cell title="rgb 颜色函数">
        <co-spinner color="rgb(100, 100, 100)"></co-spinner>
      </co-cell>
      <co-cell title="css 颜色关键字">
        <co-spinner color="yellow"></co-spinner>
      </co-cell>
      
      <co-cell title="自定义大小（px 单位）">
        <co-spinner :size="40"></co-spinner>
      </co-cell>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page-spinner'
};
</script>
