# 수평 로딩 슬라이더
**URL:** https://meta.discourse.org/t/horizontal-loading-slider/177939
**Category:** Theme component
**Tags:** deprecated
**Created:** [2월 1, 2021, 9:57오전 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939 "2021-02-01T09:57:32Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [2월 3, 2021, 2:22오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/23 "2021-02-03T14:22:38Z")
좋아요. 4원색(quaternary color)을 변경하고 싶지 않으므로 오버라이드에 사용할 id/class를 알려줄 수 있을까요?
_ **업데이트: 괜찮습니다. 찾았어요.** _
---
### Author:  [@PeterPalov](https://meta.discourse.org/u/PeterPalov)
#### Post date: [2월 3, 2021, 2:29오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/24 "2021-02-03T14:29:24Z")
이제 정말 잘 보입니다! 잘하셨습니다! 👍
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 3, 2021, 2:34오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/25 "2021-02-03T14:34:13Z")
> [@TheDarkWizard](#):
>
> 궁극적으로 이 기능을 Discourse 코어에 포함시켜 테마 컴포넌트가 필요 없게 만드는 것이 목표인가요?
가능합니다. 하지만 현재 단계에서는 여전히 실험적인 수준입니다.
> [@Terrapop](#):
>
> 좋네요. 4차 색상(quaternary color)을 변경하고 싶지 않은데, 오버라이드를 위한 id/class를 알려줄 수 있나요?
>
> _ **업데이트: 괜찮습니다. 찾았어요.** _
혹시 다른 분도 필요할까 봐 공유합니다:
```css
div.loading-indicator {
background-color: red
}
```
---
### Author:  [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [2월 3, 2021, 2:39오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/26 "2021-02-03T14:39:59Z")
@david 깃허브에서와 100% 동일하게 애니메이션을 재현해 주실 수 있을까요? 먼저 전체 폭에 걸쳐 약간 더 어두운 바가 나타나고, 그다음 로딩 바가 채워지기 시작하며, 마지막으로 페이드아웃되는 순서로 진행되도록 해 주세요.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 3, 2021, 3:04오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/27 "2021-02-03T15:04:31Z")
네, 배경에 은은한 색감을 넣어볼 수 있습니다. 또한, 바 자체에는 ‘tertiary’ 색상이 더 적합하지 않을까 하는 생각도 듭니다.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2월 3, 2021, 4:48오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/28 "2021-02-03T16:48:29Z")
로딩 바가 활성화될 때 body 클래스를 추가할 수 있을까요? 그러면 다른 부분에도 그에 맞는 효과를 적용할 수 있을 것 같습니다.
NodeBB의 페이드아웃 효과를 참고하고 있습니다: [https://community.nodebb.org/](https://community.nodebb.org/)
body 클래스가 있다면 다음과 같은 방식으로 구현할 수 있을 것 같습니다:
```scss
body.loading {
#main-outlet {
transition: opacity 0.25s;
opacity: 0;
}
}
```
---
### Author:  [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [2월 3, 2021, 5:50오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/35 "2021-02-03T17:50:18Z")
유튜브가 정확히 같은 일을 하고 있어서 정말 마음에 들어요. 이건 실험적인 기능이지만, 코어에 반영되길 바랍니다. 회전하는 원형 로딩 표시가 좀 정적인 느낌이었거든요. 그래서 그걸 좀 개선해서 슬라이더 대신 그런 스타일로 바뀌면 꽤 좋아할 것 같아요.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2월 3, 2021, 5:55오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/36 "2021-02-03T17:55:07Z")
지금까지 정말 마음에 들어. 이런 디테일이 참 깔끔하네.
---
### Author:  [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [2월 3, 2021, 6:07오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/37 "2021-02-03T18:07:27Z")
배경을 추가해줘서 고마워! 훨씬 더 좋아졌고 동적인 느낌이 확 들어. 잘했어 @david
---
### Author:  [@PeterPalov](https://meta.discourse.org/u/PeterPalov)
#### Post date: [2월 3, 2021, 6:31오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/38 "2021-02-03T18:31:35Z")
이 토픽의 게시물(28번째 게시물 등)을 읽은 후, 토픽 제목을 클릭하여 토픽의 맨 위로 이동했는데, 그때에는 이 기능이 없었습니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 3, 2021, 7:46오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/39 "2021-02-03T19:46:29Z")
사소한 부분이지만, 디스코스 허브에서 사용하는 선의 두께가 훨씬 더 좋아 보입니다.
@pmusaraj 허브의 선은 픽셀 기준으로 얼마나 두꺼운가요?
---
### Author:  [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [2월 3, 2021, 7:55오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/41 "2021-02-03T19:55:12Z")
토픽 타이머를 사용하여 이동하면 슬라이더 대신 스피너가 표시됩니다.
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 3, 2021, 7:55오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/42 "2021-02-03T19:55:40Z")
> [@sam](#):
>
> 라인 두께가 픽셀로 얼마나 되나요?
현재 2px입니다. 하지만 제 기억이 맞다면, DiscourseHub는 iOS 버그를 우회하기 위해 뷰포트의 상단 1px을 일부러 잘라냅니다. 그래서 DiscourseHub에서는 1px로 표시됩니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 3, 2021, 8:00오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/44 "2021-02-03T20:00:22Z")
알겠습니다. 지금 확인해 보면
DiscourseHub 3px
컴포넌트 로딩 + 허브 1px
컴포넌트 로딩 + 사파리 2px
모두 3px로 보이면 좋겠네요 🙂
참고로 허브가 허브 자체를 수정하도록 할 수 있습니다
---
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 3, 2021, 8:04오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/45 "2021-02-03T20:04:11Z")
> [@sam](#):
>
> DiscourseHub 3px
아, 이제 무슨 말씀인지 알겠습니다. 앱에 자체 로딩 슬라이더가 있네요. 네, 3px가 훨씬 좋아 보입니다 👍
@pmusaraj CSS에서 Discourse가 허브에서 실행 중인지 확인할 수 있는 방법이 있을까요? 아니면 앱에서 추가 CSS를 주입할 수 있을까요?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 3, 2021, 8:08오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/46 "2021-02-03T20:08:58Z")
음, 앱 클래스는 iPad에서만 추가하는 것 같습니다. JS에서는 `isAppWebview()` 유틸리티를 사용해 확인할 수 있습니다(아니면 모든 DiscourseHub 웹뷰에 body 클래스를 추가할 수도 있는데, 어쨌든 유용할 것입니다).
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2월 3, 2021, 11:50오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/47 "2021-02-03T23:50:33Z")
개인적으로 스피너보다 훨씬 큰 개선이라고 느끼며, 이를 기본값으로 코어에 포함해야 한다고 생각합니다. 👏 놀랍게도 스피너보다 훨씬 빠르게 느껴져요! @sam님과 @eviltrout님은 어떻게 생각하시나요? 이 상태로 좀 더 사용해보고 결정할 시간이 있습니다..
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 3, 2021, 11:52오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/48 "2021-02-03T23:52:14Z")
네, 데스크톱과 모바일 모두에서 정말 마음에 듭니다. 해결해야 할 작은 버그들이 몇 있지만, 이 기능이 코어에 포함되어야 한다고 생각합니다.
---
### Author:  [@martin](https://meta.discourse.org/u/martin)
#### Post date: [2월 3, 2021, 11:58오후 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/49 "2021-02-03T23:58:34Z")
진행률 바가 왜 나타나는지 궁금했는데! 정말 좋아요, 잘했어요 @david👏
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [2월 4, 2021, 7:41오전 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/51 "2021-02-04T07:41:01Z")
정말 좋습니다! 다만 맥북 레티나 화면에서는 제 취향에 비해 너무 은은한 것 같아요. 3px보다 1px 정도만 보이는 것처럼 느껴져서 거의 눈에 띄지 않거든요.
[이전 페이지](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=1)
[다음 페이지](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=3)