디자인키트 인스타그램 디자인키트 핀터레스트 디자인키트 비핸스 디자인키트

Swiper progressbar 커스텀(로딩바)

CSS 24.03.05

Swiper progressbar는 Swiper 라이브러리를 사용하여 슬라이드 쇼나 이미지 갤러리와 같은 컴포넌트의 로딩 상태를 시각적으로 보여주는데 사용됩니다. 

이 커스텀 로딩 바는 사용자에게 현재 슬라이드의 진행 상황을 시각적으로 전달하고, 컨텐츠가 로딩되는 동안 사용자 경험을 향상시키는 데 도움을 줍니다.


구현 방법

Swiper progressbar를 커스터마이징하는 방법은 다양합니다.


CSS 스타일링

로딩 바의 디자인을 변경하기 위해 CSS를 사용하여 모양, 색상, 크기 등을 조정할 수 있습니다.

Swiper 옵션 설정: Swiper 라이브러리에서 제공하는 옵션을 활용하여 로딩 바의 동작을 조절할 수 있습니다. 

예를 들어, 프로그레스바를 슬라이드와 동기화하거나, 애니메이션 효과를 추가할 수 있습니다.


이벤트 핸들링

Swiper 이벤트를 활용하여 로딩 바의 동작을 제어할 수 있습니다.

슬라이드 변경 시 로딩 바를 업데이트하거나, 로딩이 완료될 때 로딩 바를 숨기는 등의 작업을 수행할 수 있습니다.


사용 사례 및 확장성

Swiper progressbar는 다양한 컨텐츠와 UI에 적용할 수 있습니다. 

몇 가지 사용 사례는 다음과 같습니다:

- 이미지 갤러리 : 이미지 슬라이드 쇼나 갤러리에서 각 이미지의 로딩 상태를 표시할 수 있습니다.

- 컨텐츠 프레젠테이션 : 프레젠테이션 소프트웨어나 웹 페이지에서 각 섹션의 로딩 상태를 시각적으로 표시할 수 있습니다.

- 커스터마이징 및 확장성 : Swiper progressbar는 다양한 디자인 패턴과 UI 요구 사항에 맞게 커스터마이징할 수 있으며, 

필요에 따라 확장하여 더 많은 기능을 추가할 수 있습니다.

예를 들어, 로딩 바에 애니메이션 효과를 추가하거나, 로딩이 완료되면 특정 동작을 수행하도록 설정할 수 있습니다.


[ 코드예제 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiper Autoplay with Progress Bar</title>
  
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  
  <style>
    .swiper-progress-bar {
      width: 100%;
      height: 4px;
      background-color: #007bff;
    }
  </style>
</head>
<body>
 
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  <div class="autoplay-progress">
      <svg viewBox="0 0 48 48">
    <circle cx="24" cy="24" r="20"></circle>
    </svg>
    <span></span>
    </div>
</div>
 
<script>
    const progressCircle = document.querySelector(".autoplay-progress svg");
    const progressContent = document.querySelector(".autoplay-progress span");
  var swiper = new Swiper('.swiper-container', {
    // Autoplay 활성화 및 옵션 설정
    autoplay: {
      delay: 5000, // 슬라이드 전환 시간 (밀리초)
      disableOnInteraction: false, // 사용자 상호 작용 후에도 자동 재생 유지
    },
    on: {        autoplayTimeLeft(s, time, progress) {
          progressCircle.style.setProperty("--progress", 1 - progress);
          progressContent.textContent = `${Math.ceil(time / 1000)}s`;
        }
      }
 });    
</script>
 
</body>
</html>
 
cs



예제

See the Pen Untitled by designkits (@designkits) on CodePen.

목록으로

관련 템플릿

최근 포스트

© 디자인키트