<script setup lang="ts">
withDefaults(
  defineProps<{
    length?: number
  }>(),
  {
    length: 49,
  },
)
</script>
<template>
  <div class="round-split">
    <span v-for="i in length" :key="i" class="dot"></span>
  </div>
</template>
<style scoped lang="scss">
.round-split {
  width: 100%;
  height: 1vh;
  background-size: 20px 12px;
  background-position: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  .dot {
    width: 1vh;
    height: 1vh;
    background: linear-gradient(180deg, #6384b9 0%, #82aef5 100%);
    margin: 0 4px;
    border-radius: 50%;
  }
}
</style>
