취업을 한 지 한달 정도 됐었나...? 로딩스피너를 만들어야 하는 상황이 왔다. ㅋㅋ 하나부터 천천히 커스텀하기 싫어서 여기저기 서치를 엄청나게 했는데, 이게 웬 떡이냐? 어떤 친절한 분이 간단하게 스피너를 커스텀해서 사용할 수 있게 하나 뚝딱 만들어 놓으셨다. 살면서 적게 일하고 많이 버시길... 노션에 나 혼자만 알고 있을라고 정리는 해 놨는데, 그래도 뭔가 벨로그에도 뭔가를 작성하고 싶은 마음에 정리해 본다.
https://spin.js.org/
👆 이 사이트가 바로 그 엄청난 고수 분의 사이트.
script 연결
<head>
<!--스피너-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
</head>🎀 커스텀 방법
<script>
const opts = {
lines: 12, // 선 개수
length: 80, // 각 선의 길이
width: 9, // 선 굵기
radius: 45, // 안쪽 원의 반지름
scale: 0.4, // 스피너의 전체 크기
corners: 1, // 코너 라운드(0..1)
speed: 1.2, // Rounds per second
rotate: 37, // 초당 회진 수
animation: 'spinner-line-fade-quick', // 라인의 CSS 애니메이션 이름
direction: 1, // 1: 시계 방향, -1: 시계 반대 방향
color: '#000000', //CSS 색상
fadeColor: 'transparent', // CSS 색상
top: '50%', // Top position
left: '50%', // Left position
shadow: '0 0 1px transparent', // 그림자
zIndex: 2000000000, // z-index
className: 'spinner', // 스피너에 할당할 CSS 클래스
position: 'fixed', // positioning
};
</script>💻 JS 사용법
<script>
const target = document.getElementById('내가 사용할 곳의 ID');
const spinner = new Spinner(opts).spin(target)
</script>♻ Submit과 연결하기
<script>
const handleSubmit = () => {
spinner.spin(target)
}
</script>사실 공부하면서 알아가는 게 제일 베스트긴 한데... 웅, 공부 안 할 거야~ 날먹 할 거야~ 준 만큼만 일한다.
개발이 뭔가요