javascript spinner 예제

다시 한번,이 스피너는 현재내장색상, 그래서 당신은 쉽게 텍스트 색상 유틸리티와 모양을 변경할 수 있습니다. 여기에 지원되는 변형과 함께 파란색으로 표시됩니다. 이제 우리는 좋은 간단한 CSS로딩 스피너를 가지고 있습니다! 후프 후프. SCSS 믹스는 어디 당신이 말을 듣고?! 다음에 정리하겠습니다. 단추 내에서 스피너를 사용하여 작업이 현재 처리 중이거나 진행 중임을 나타냅니다. 스피너 요소에서 텍스트를 교환하고 필요에 따라 단추 텍스트를 사용할 수도 있습니다. 일반적인 Kintone 사용 사례에서 대량의 데이터가 REST API로 처리될 때 창 중간에 스피너를 표시하고 프로세스가 완료되면 표시를 중지할 수 있습니다. 우리의 스피너는 자신의 중심 주위를 회전하는 간단한 원이 될 것입니다. 스피너 태그는 단일 div입니다. 우리의 스피너는 의사 요소가 될 것입니다 : ::전에 (당신은 사용할 수 있습니다 ::after뿐만 아니라) 우리의 div.

강력한 Heydon Pickering은 액세스 가능한 로딩 애니메이션을 만드는 방법에 대한 기사를 썼습니다. CSS 로딩 스피너에 이를 적용하는 방법을 보여 드리겠습니다. 이 문서에서는 계산의 샘플 코드에 스피너를 적용하고 총 레코드 카운트 아티클을 표시합니다. 이 샘플은 조건과 일치하는 필드 값을 사용하여 앱의 레코드 수를 계산합니다. 총 레코드 수가 100개보다 크면 필요한 API 호출 수도 증가하여 프로세스가 완료되는 데 걸린 시간이 증가하고 최종 숫자가 표시됩니다. 여기서 spin.js는 많은 양의 데이터를 처리해야 할 때 사용자가 프로세스가 실행되고 있음을 알 수 있도록 스피너를 표시하는 데 사용할 수 있습니다. 레코드 목록 페이지가 로드되면 REST API 호출이 이루어지고 호출이 처리되는 동안 스피너가 표시됩니다. 텍스트 색상 을 사용하여 스피너에 색상을 추가하십시오: 테두리 스피너를 좋아하지 않으면 커지 스피너로 전환합니다. 기술적으로 회전하지는 않지만 반복적으로 성장합니다! 웹 개발을 시작했을 때 로딩 스피너는 애니메이션 .gif를 사용하는 데 사용되었습니다. 질문 / 의견 / 버그 / 피드백은 연락주시기 바랍니다! 읽어 주셔서 감사합니다. 이 기사를 읽은 후 만든 스피너의 예가 있다면 나는 그들을보고 싶습니다! 로더를 페이지 중간에 배치하고 로드가 완료되면 “페이지 콘텐츠”를 표시하는 방법의 예: 애니메이션을 시작하기 전에 스피너 자체를 스타일링하여 시작합니다.

테두리 내부에서 회전하는 파란색 것은 테두리 위쪽 속성으로 지정됩니다. 더 많은 “스피너”를 원하는 경우 테두리 아래쪽, 테두리 왼쪽 및/또는 테두리 오른쪽을 포함할 수도 있습니다(아래 예제 참조). 플렉스 박스 유틸리티, 부동 유틸리티 또는 텍스트 정렬 유틸리티를 사용하여 어떤 상황에서도 스피너를 정확하게 배치할 수 있습니다. spin.js는 일반적으로 로딩 아이콘으로 사용되는 스피너를 표시하는 라이브러리입니다.