스피너

<div class="form-group">
	<div class="form-tit">
		<label for="consult_name">Label</label>
	</div>
	<div class="form-conts">
		<div class="form-spinner">
			<input type="text" id="consult_name" class="krds-input" placeholder="placeholder">
			<div class="krds-spinner" role="status">
				<span class="sr-only">로딩 중</span>
			</div>
		</div>
	</div>
</div>


<br>
<br>


<div class="krds-spinner" role="status">
	<span class="sr-only">로딩 중</span>
	Loading data..
</div>

<template>
  <div class="form-group">
	<div class="form-tit">
		<label for="consult_name">Label</label>
	</div>
	<div class="form-conts">
		<div class="form-spinner">
			<input type="text" id="consult_name" class="krds-input" placeholder="placeholder">
			<div class="krds-spinner" role="status">
				<span class="sr-only">로딩 중</span>
			</div>
		</div>
	</div>
</div>


<br>
<br>


<div class="krds-spinner" role="status">
	<span class="sr-only">로딩 중</span>
	Loading data..
</div>
</template>

<script setup lang="ts">
// 스피너 컴포넌트
// 로딩 표시 스피너입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>