css 로만 짠 스피너 코드

스피너를 HTML과 CSS만으로 구현하는 것은 간단합니다. 여기서는 기본적인 로딩 스피너를 만들 것입니다. 이 스피너는 원형 모양으로, 일부분이 강조되어 회전하는 효과를 가집니다.

먼저 HTML에서는 스피너를 위한 요소를 만듭니다:

<div class="spinner"></div>

그런 다음 CSS에서 스피너의 스타일과 애니메이션을 정의합니다:

 

<style>

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* 회색 테두리 */
    border-top: 4px solid blue; /* 상단에 파란색 강조 */
    border-radius: 50%; /* 원형 모양 */
    width: 50px; /* 스피너의 너비 */
    height: 50px; /* 스피너의 높이 */
    animation: spin 2s linear infinite; /* 무한 회전 애니메이션 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>

이 CSS 코드는 .spinner 클래스에 원형의 테두리와 애니메이션을 적용하여 스피너가 계속 회전하도록 만듭니다. border-top 속성은 스피너의 상단 부분을 강조하여 회전하는 부분을 눈에 띄게 합니다.

이 코드를 웹 페이지에 적용하면 기본적인 로딩 스피너가 표시됩니다. 필요에 따라 스피너의 색상, 크기, 회전 속도 등을 조정할 수 있습니다.

반응형 디자인에서 최대폭 1024픽셀을 고려하여 스피너를 조정하려면, 미디어 쿼리를 사용하여 1024픽셀 이하의 화면 크기에서 스피너의 크기와 스타일을 변경할 수 있습니다. 이를 통해 더 큰 화면에서는 기존의 스피너 크기를 유지하고, 더 작은 화면에서는 스피너의 크기를 줄여 적합하게 보이도록 조정할 수 있습니다.

다음은 최대폭 1024픽셀을 고려한 반응형 스피너를 위한 HTML과 CSS 코드입니다:

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
    .spinner {
        width: 30px; /* 더 작은 화면에서 스피너 크기 감소 */
        height: 30px; /* 더 작은 화면에서 스피너 크기 감소 */
        border-width: 3px; /* 더 작은 화면에서 테두리 두께 감소 */
    }
}

위 반응형 코드를 실행하면 아래 처럼 나오는다. 색상과 크기는 조절 가능 ^^