로딩 아이콘 사용자 지정

Canapin · 9월 29, 2020, 3:37오후

로딩 아이콘 커스터마이징

주요 로딩 아이콘은 변경되지만, 작은 로딩 아이콘(작성 창, 검색 메뉴 등)은 변경되지 않습니다.

현재 테마를 편집하거나 새로운 테마 컴포넌트를 생성합니다.

</head> 태그 안으로 이동하여 아래 코드를 붙여넣습니다:

<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">

  <div class="my-custom-loader">
  </div>

</div>
{{else}}
  {{yield}}
{{/if}}
</script>

.my-custom-loader를 교체하거나 해당 로더의 HTML 코드를 채워 넣으세요.

CSS 섹션으로 이동하여 아래 코드를 붙여넣습니다:

.custom-loader-container {
    position: relative;
    margin: 20px 0 20px;
    display: flex;
    justify-content: center;
}

커스텀 로더의 CSS를 추가하세요.

예시

펄스 서클 (Pulsing circles)

미리보기: https://theme-creator.discourse.org/theme/canapin/loader-pulse

원본 코드 출처: https://codepen.io/victordarras/pen/vHitB

</head>:

<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">

  <div class="loader-pulser">
  </div>
  
</div>
{{else}}
  {{yield}}
{{/if}}
</script>

CSS:

.custom-loader-container {
    position: relative;
    margin: 20px 0 20px;
    display: flex;
    justify-content: center;
}
.loader-pulser {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 3em;
  font-size: 10px;
  width: 3.2em;
  height: 3.2em;
  right: 2em;
  position: relative;
  &:before, &:after {
    content: '';
    border: 2px solid #ccc;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    position: absolute;
    animation: pulse .5s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
  }
  &:before {
    border: 2px solid #aaa;
    animation-delay: .15s;
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.1,.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2,1.2);
    opacity: 0;
  }
}

페이딩 바 (svg 애니메이션)

미리보기: https://theme-creator.discourse.org/theme/canapin/loader-bars

원본 코드 출처: https://codepen.io/aurer/pen/jEGbA

</head>:

<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">
    <div class="bars-loader">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
        <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.4s" repeatCount="indefinite"></animate>
        </rect>
        <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.4s" repeatCount="indefinite"></animate>
        </rect>
        <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
          <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.4s" repeatCount="indefinite"></animate>
          <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.4s" repeatCount="indefinite"></animate>
        </rect>
      </svg>
    </div>
</div>
{{else}}
  {{yield}}
{{/if}}
</script>

CSS:

.custom-loader-container {
    position: relative;
    margin: 20px 0 20px;
    display: flex;
    justify-content: center;
}
.bars-loader {
    svg path,
    svg rect{
      fill: #333;
    }
}

유니사이클 (Unicycle)

미리보기: https://theme-creator.discourse.org/theme/canapin/loader-unicycle

원본 코드 출처: https://codepen.io/Canapin/pen/gOrddVR

</head>:

<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
<div class="custom-loader-container">

    <div class="unicycle-loader">
        <div class="saddle"></div>
        <div class="frame">
            <div class="hub"></div>
        </div>
        <div class="wheel">
            <div class="crank left">
                <div class="pedal"></div>
            </div>
            <div class="spokes">
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
                <div class="spoke"></div>
            </div>
            <div class="crank">
                <div class="pedal"></div>
            </div>
        </div>
    </div>
    
</div>
{{else}}
  {{yield}}
{{/if}}
</script>

CSS:

.custom-loader-container {
    position: relative;
    margin: 20px 0 20px;
    display: flex;
    justify-content: center;
}
$color: black;
$speed: 1.5s;
.unicycle-loader {
    margin: 20px auto 20px auto;
    position: relative;
    transform: rotate(7.5deg) scale(0.70);
    opacity: .2;
    .saddle {
      width: 50px;
      height: 15px;
      background-color: $color;
      margin-left: 30px;
      position: relative;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 20px;
      transform: rotate(-5deg);
      &:before {
        content: "";
        display: block;
        width: 30px;
        height: 20px;
        background-color: $color;
        border-radius: 50%;
        position: absolute;
        left: -5px;
        top: -5px;
      }
      &:after {
        content: "";
        display: block;
        width: 20px;
        height: 10px;
        background-color: $color;
        border-radius: 50%;
        position: absolute;
        right: -7px;
        top: 1px;
        transform: rotate(-35deg);
      }
    }
    
    .frame {
      width: 7px;
      height: 45px;
      background: $color;
      margin-left: 51px;
      position: relative;
      z-index: 1;
      margin-bottom: 15px;
      &:before {
        content: "";
        height: 75px;
        width: 11px;
        background: $color;
        display: block;
        position: relative;
        top: 100%;
        margin-left: -2px;
      }
    }
    
    .hub {
      position: absolute;
      bottom: calc(-100% - 30px);
      left: calc(50% - 0.5px);
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: $color;
      border: 3px solid $color;
      z-index: 2;
    }
    
    .loader * {
      box-sizing: border-box;
    }
    $tire_size: 1;
    .wheel {
      width: 110px;
      height: 110px;
      border: 10px solid $color;
      border-radius: 50%;
      position: relative;
      animation: $speed rotate360 infinite linear;
      box-sizing: border-box;
      &:before {
        content: "";
        width: 100%;
        height: 100%;
        border: 12px dotted $color;
        border-radius: 50%;
        margin-left: -12px;
        margin-top: -12px;
        position: absolute;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        border: 12px dotted $color;
        border-radius: 50%;
        margin-left: -12px;
        margin-top: -12px;
        position: absolute;
        transform: rotate(12deg);
      }
    }
    
    .spoke {
      top: 50%;
      transform: translateY(-50%);
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      &:before {
        left: 0;
        content: "";
        height: 1px;
        width: 45px;
        transform-origin: 20px center;
        background: rgba(0,0,0,.5);
        position: absolute;
        transform: rotate(10deg);
      }
      &:after {
        left: 0;
        content: "";
        height: 1px;
        width: 45px;
        transform-origin: 20px center;
        background: rgba(0,0,0,.5);
        position: absolute;
        transform: rotate(10deg);
        transform: rotate(-10deg);
      }
      &:nth-child(1) {
        transform: rotate(30deg);
      }
      &:nth-child(2) {
        transform: rotate(60deg);
      }
      &:nth-child(3) {
        transform: rotate(90deg);
      }
      &:nth-child(4) {
        transform: rotate(120deg);
      }
      &:nth-child(5) {
        transform: rotate(150deg);
      }
      &:nth-child(6) {
        transform: rotate(180deg);
      }
      &:nth-child(7) {
        transform: rotate(210deg);
      }
      &:nth-child(8) {
        transform: rotate(240deg);
      }
      &:nth-child(9) {
        transform: rotate(270deg);
      }
      &:nth-child(10) {
        transform: rotate(300deg);
      }
      &:nth-child(11) {
        transform: rotate(330deg);
      }
      &:nth-child(12) {
        transform: rotate(360deg);
      }
    }
    
    .crank {
      height: 4px;
      width: 30%;
      background: $color;
      transform-origin: left 1px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%);
      .pedal {
        width: 20px;
        height: 6px;
        background: $color;
        position: absolute;
        right: -10px;
        margin-top: -1px;
        animation: $speed rotate360pedal infinite linear;
      }
      &.left {
        transform: rotate(180deg);
      }
    }
    
    @keyframes rotate360 {
      0% {
        transform: rotate(-50deg);
      }
    
      100% {
        transform: rotate(310deg);
      }
    }
    
    @keyframes rotate360pedal {
      0% {
        transform: rotate(410deg);
      }
    
      100% {
        transform: rotate(50deg);
      }
    }
}

Heather_Dudley · 9월 29, 2020, 5:37오후

정말, 정말 좋아합니다. 카테고리가 많아서 카테고리 목록 페이지가 로드에 몇 초가 걸리거든요. 일륜차가 정말 웃기게 보이네요!

Don · 10월 23, 2020, 9:52오전

안녕하세요 @Canapin,
공유해 주셔서 감사합니다. 정말 마음에 듭니다.
로더를 전역으로 변경할 수 있을까요?

감사합니다!

Canapin · 10월 25, 2020, 10:22오전

작은 스피너에 대해 말씀하시는 거라면, 이 부분부터 시작해 보세요:

Don · 10월 25, 2020, 11:19오전

@Canapin 감사합니다!

이해했어요! spinner 클래스를 대상으로 삼아 pulser loader로 변경했습니다.

Johnny_McIvor · 6월 16, 2021, 3:14오전

gif로 대체하는 방법은 무엇인가요? 예를 들어:

Heather_Dudley · 6월 16, 2021, 2:10오후

현재는 불가능합니다.

Johnny_McIvor · 6월 16, 2021, 6:12오후

정적 이미지로 교체할 수 있을까요? 아마도 변경하지는 않을 것 같지만요.

글		댓글	조회수
Custom Loading Spinner Component Theme component	18	2874	11월 25, 2023
Loading Slider to Spinner Theme component	1	673	10월 5, 2023
How to use Font Awesome pulse as the loading icon? Product Support	1	421	5월 23, 2022
Spinner on initial load Theme component	0	2462	5월 15, 2018
Replace Spinner with a logo Product Support	7	2669	10월 25, 2020

로딩 아이콘 사용자 지정

로딩 아이콘 커스터마이징

예시

펄스 서클 (Pulsing circles)

페이딩 바 (svg 애니메이션)

유니사이클 (Unicycle)

Related topics