728x90
반응형
프로그레스(progress)는 진전, 진척, 진행을 의미하며, 웹사이트 환경에서는 웹사이트 방문자가 콘텐츠의 진행 상황을 시각적으로 알 수 있도록 바(bar) 등의 형태로 구현할 수 있다.
프로그레스(progress)는 콘텐츠의 진행 상황을 단순 시각화하는 것에서 그치지 않고, 웹사이트 방문자가 서론부터 결론까지 이어지는 콘텐츠의 전체적인 구조를 보다 잘 이해할 수 있게 도와준다.
본 글은 바(bar), 서클(circle), 퍼센트(percentage), 탑 버튼(top button) 형태로 프로그레스(progress)를 적용하는 방법에 대한 내용이다.
1] 바(bar) - 기본형
내가 설명할 '기본형'은 프로그레스 바를 화면 상단, 화면 하단, 화면 우측, 화면 좌측에 적용하는 방법이다.
1-1] HTML
아래 코드를 HTML의 </head> 위에 삽입한다.
16번째 줄에 width로 되어 있는데, 화면 상단 및 하단은 width로 삽입하고 화면 우측 및 좌측은 height로 삽입한다.
<!-- 프로그레스 바 시작 -->
<div class="progress-container">
<div class="progress-bar">
<span class="percent"></span>
</div>
</div>
<script>
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
$(".progress-bar").css("width", scrollPercent + "%"); <!-- width 또는 height -->
$(".percent").text(roundScroll);
});
</script>
<!-- 프로그레스 바 끝 -->
</head>
1-2] CSS - 화면 상단 및 하단
먼저 화면 상단 및 하단에 적용하는 코드다.
1-2-1] 화면 상단 / 디자인 ①
아래 코드를 CSS에 삽입하면 적용된다.
progress-container는 '회색 바'이며, height를 0px로 하면 안 보이게 할 수 있다.
progress-bar는 '컬러 바'이며, 4가지 예시 색상이 있으니 기호에 맞게 선택하기 바란다.
percent는 '숫자', percent::after는 '%'이며, display를 none으로 하면 안 보이게 할 수 있다.
/* 1-2-1 */
.progress-container {
position: fixed;
top: 0px;
width: 100%;
height: 5px; /* height: 0px; 으로 하면 안 보임 */
background-color: #bbb;
z-index: 9997;
}
.progress-bar {
position: fixed;
top: 0px;
width: 0%;
height: 5px;
background: linear-gradient(to right,rgba(130,60,180,1) 0%, rgba(250,30,30,1) 50vw, rgba(250,180,70,1) 100vw);
/* background: linear-gradient(to right, white, gray 50vw, black 100vw); */
/* background: linear-gradient(90deg, #00C9FF 10%, #92FE9D 90%); */
/* background: #191970; */
border-radius: 0px 10px 10px 0px;
/* border-radius: 10px; */
}
.percent {
/* display: none; 을 추가 하면 안 보임 */
position: absolute;
top: 10px;
right: 25px;
display: block;
font-size: 20px;
font-weight: 700;
color: #000;
text-align: center;
}
.percent::after {
/* display: none; 을 추가 하면 안 보임 */
content: "%";
position: absolute;
bottom: 2px;
right: -15px;
font-size: 12px;
font-weight: 500;
opacity: 0.5;
}
1-2-2] 화면 상단 / 디자인 ②
'1-2-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-2-1 */
.progress-container {
height: 5px; /* height: 0px; 으로 하면 안 보임 */
}
.progress-bar {
height: 5px;
}
.percent {
top: 10px;
font-size: 20px;
color: #000;
}
/* 1-2-2 */
.progress-container {
height: 20px; /* height: 0px; 으로 하면 안 보임 */
}
.progress-bar {
height: 20px;
}
.percent {
top: -1px;
font-size: 16px;
color: #fff;
}
1-2-3] 화면 하단 / 디자인 ①
'1-2-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-2-1 */
.progress-container {
top: 0px;
}
.progress-bar {
top: 0px;
}
.percent {
top: 10px;
}
/* 1-2-3 */
.progress-container {
bottom: 0px;
}
.progress-bar {
bottom: 0px;
}
.percent {
bottom: 10px;
}
1-2-4] 화면 하단 / 디자인 ②
'1-2-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-2-1 */
.progress-container {
top: 0px;
height: 5px; /* height: 0px; 으로 하면 안 보임 */
}
.progress-bar {
top: 0px;
height: 5px;
}
.percent {
top: 10px;
font-size: 20px;
color: #000;
}
/* 1-2-4 */
.progress-container {
bottom: 0px;
height: 20px; /* height: 0px; 으로 하면 안 보임 */
}
.progress-bar {
bottom: 0px;
height: 20px;
}
.percent {
bottom: 1px;
font-size: 16px;
color: #fff;
}
1-3] CSS - 화면 우측 및 좌측
다음은 화면 우측 및 좌측에 적용하는 코드다.
1-3-1] 화면 우측 / 디자인 ①
아래 코드를 CSS에 삽입한다.
'1-2'의 CSS 코드에서 크게 달라진 부분은 텍스트를 수직 방향으로 회전시킨 것이다.
/* 1-3-1 */
.progress-container {
position: fixed;
right: 0px;
height: 100%;
width: 5px; /* width: 0px; 으로 하면 안 보임 */
background-color: #bbb;
z-index: 9997;
}
.progress-bar {
position: fixed;
right: 0px;
height: 0%;
width: 5px;
background: linear-gradient(to bottom,rgba(130,60,180,1) 0%, rgba(250,30,30,1) 50vh, rgba(250,180,70,1) 100vh);
/* background: linear-gradient(to bottom, white, gray 50vh, black 100vh); */
/* background: linear-gradient(180deg, #00C9FF 10%, #92FE9D 90%); */
/* background: #191970; */
border-radius: 0px 0px 10px 10px;
/* border-radius: 10px; */
}
.percent {
/* display: none; 을 추가 하면 안 보임 */
position: absolute;
left: -5px;
bottom: 10px;
font-size: 20px;
font-weight: 700;
color: #000;
text-align: left;
display: inline-block;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom left;
}
.percent::after {
/* display: none; 을 추가 하면 안 보임 */
content: "%";
position: absolute;
right: -15px;
bottom: 2px;
font-size: 12px;
font-weight: 500;
opacity: 0.5;
}
1-3-2] 화면 우측 / 디자인 ②
'1-3-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-3-1 */
.progress-container {
width: 5px; /* width: 0px; 으로 하면 안 보임 */
}
.progress-bar {
width: 5px;
}
.percent {
left: -5px;
font-size: 20px;
color: #000;
}
/* 1-3-2 */
.progress-container {
width: 20px; /* width: 0px; 으로 하면 안 보임 */
}
.progress-bar {
width: 20px;
}
.percent {
left: 19px;
font-size: 16px;
color: #fff;
}
1-3-3] 화면 좌측 / 디자인 ①
'1-3-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-3-1 */
.progress-container {
right: 0px;
}
.progress-bar {
right: 0px;
}
.percent {
left: -5px;
bottom: 10px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom left;
}
/* 1-3-3 */
.progress-container {
left: 0px;
}
.progress-bar {
left: 0px;
}
.percent {
right: -5px;
bottom: 25px;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom right;
}
1-3-4] 화면 좌측 / 디자인 ②
'1-3-1'의 CSS 코드를 아래 코드로 수정한 결과다.
/* 1-3-1 */
.progress-container {
right: 0px;
width: 5px; /* width: 0px; 으로 하면 안 보임 */
}
.progress-bar {
right: 0px;
width: 5px;
}
.percent {
left: -5px;
bottom: 10px;
font-size: 20px;
color: #000;
text-align: left;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom left;
}
/* 1-3-4 */
.progress-container {
left: 0px;
width: 20px; /* width: 0px; 으로 하면 안 보임 */
}
.progress-bar {
left: 0px;
width: 20px;
}
.percent {
right: 19px;
bottom: 25px;
font-size: 16px;
color: #fff;
text-align: right;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom right;
}
2] 바(bar) - 응용형
내가 설명할 '응용형'은 프로그레스 바를 본문 상단, 헤더 하단, 화면 사방에 적용하는 방법이다.
2-1] 본문 상단
먼저 아래와 같이 프로그레스 바를 본문 상단에 적용하는 코드다. '퍼센트 숫자'가 아닌 '이미지 로고'를 적용할 수 있다.
2-1-1] HTML
아래 코드를 HTML에서 본문에 해당하는 entry-content div 코드 아래에 삽입한다.
'기본형'의 HTML 코드에서 크게 달라진 부분은 '퍼센트 숫자'를 제거하고 '이미지 로고'를 삽입한 것이다.
<div class="entry-content">
<!-- 프로그레스 바 시작 -->
<div class="progress-container">
<div class="progress-bar">
<span class="progress-logo"><img src='./images/progress-logo.png' alt='logo' /></span>
</div>
</div>
<script>
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
$(".progress-bar").css("width", scrollPercent + "%");
});
</script>
<!-- 프로그레스 바 끝 -->
##_article_rep_desc_##
2-1-2] CSS
아래 코드를 CSS에 삽입한다.
/* 본문 상단 프로그레스 바 */
.progress-container {
position: sticky;
top: 15px;
width: 100%;
height: 10px; /* height: 0px; 으로 하면 안 보임 */
background-color: #bbb;
border-radius: 10px;
margin-bottom: 50px;
z-index: 9997;
}
.progress-bar {
position: absolute;
top: 0px;
width: 0%;
height: 10px;
background: linear-gradient(to right,rgba(130,60,180,1) 0%, rgba(250,30,30,1) 50vw, rgba(250,180,70,1) 100vw);
/* background: linear-gradient(to right, white, gray 50vw, black 100vw); */
/* background: linear-gradient(90deg, #00C9FF 10%, #92FE9D 90%); */
/* background: #191970; */
border-radius: 10px;
}
.progress-logo {
/* display: none; 을 추가 하면 안 보임 */
position: absolute;
top: -5px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
}
.progress-logo > img {
/* display: none; 을 추가 하면 안 보임 */
width: 100%;
}
2-2] 헤더 하단
다음은 아래와 같이 프로그레스 바를 헤더 하단에 적용하는 코드다.
2-2-1] HTML
아래 코드를 HTML에서 헤더에 해당하는 </header> 코드 바로 위에 삽입한다.
</div>
<!-- 프로그레스 바 시작 -->
<div class="progress-container">
<div class="progress-bar">
</div>
</div>
<script>
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
$(".progress-bar").css("width", scrollPercent + "%");
$(".percent").text(roundScroll);
});
</script>
<!-- 프로그레스 바 끝 -->
</header>
2-2-2] CSS
아래 코드를 CSS에 삽입한다.
/* 기존 헤더 코드 수정 */
#header {
position: sticky;
top: 0px;
background: #fff;
border-bottom: 1px solid #eee;
z-index: 9999;
}
/* 헤더 하단 프로그레스 바 */
.progress-container {
width: 100%;
height: 5px; /* height: 0px; 으로 하면 안 보임 */
background-color: #bbb;
/* background: transparent; */
}
.progress-bar {
width: 0%;
height: 5px;
background: linear-gradient(to right,rgba(130,60,180,1) 0%, rgba(250,30,30,1) 50vw, rgba(250,180,70,1) 100vw);
/* background: linear-gradient(to right, white, gray 50vw, black 100vw); */
/* background: linear-gradient(90deg, #00C9FF 10%, #92FE9D 90%); */
/* background: #191970; */
border-radius: 0px 10px 10px 0px;
/* border-radius: 10px; */
}
2-3] 화면 사방
다음은 아래와 같이 프로그레스 바를 화면 사방에 적용하는 코드다.
2-3-1] HTML
아래 코드를 HTML의 </head> 위에 삽입한다.
<!-- 프로그레스 바 시작 -->
<div class="progress-top"></div>
<div class="progress-right"></div>
<div class="progress-bottom"></div>
<div class="progress-left"></div>
<script>
const ProgressScroll = (() => {
let s;
return {
settings() {
return {
top: $('.progress-top'),
right: $('.progress-right'),
bottom: $('.progress-bottom'),
left: $('.progress-left'),
windowHeight: $(window).height(),
windowWidth: $(window).width(),
scrollHeight: $(document).height() - $(window).height(),
progressTotal: $(window).height() * 2 + $(window).width() * 2,
scrollPosition: $(document).scrollTop()
};
},
init() {
s = this.settings();
this.bindEvents();
},
bindEvents() {
$(window).on('scroll', this.onScroll);
$(window).on('resize', this.onResize);
this.progress();
},
onScroll() {
s.scrollPosition = $(document).scrollTop();
ProgressScroll.requestTick();
},
onResize() {
s.windowHeight = $(window).height();
s.windowWidth = $(window).width();
s.scrollHeight = $(document).height() - s.windowHeight;
s.progressTotal = s.windowHeight * 2 + s.windowWidth * 2;
ProgressScroll.requestTick();
},
requestTick() {
requestAnimationFrame(this.progress);
},
progress() {
const percentage = s.scrollPosition / s.scrollHeight;
const width = s.windowWidth / s.progressTotal;
const height = s.windowHeight / s.progressTotal;
s.top.css('width', `${(percentage / width) * 100}%`);
s.right.css('height', `${((percentage - width) / height) * 100}%`);
s.bottom.css('width', `${((percentage - width - height) / width) * 100}%`);
s.left.css('height', `${((percentage - width - height - width) / height) * 100}%`);
}
};
})();
$(() => {
ProgressScroll.init();
});
</script>
<!-- 프로그레스 바 끝 -->
</head>
2-3-2] CSS
아래 코드를 CSS에 삽입한다.
/* 화면 사방 프로그레스 바 */
.progress-top {
position: fixed;
top: 0px;
left: 0px;
height: 5px;
z-index: 9997;
background-color: #191970;
border-radius: 10px;
}
.progress-right {
position: fixed;
top: 0px;
right: 0px;
width: 5px;
z-index: 9997;
background-color: #191970;
border-radius: 10px;
}
.progress-bottom {
position: fixed;
bottom: 0px;
right: 0px;
height: 5px;
z-index: 9997;
background-color: #191970;
border-radius: 10px;
}
.progress-left {
position: fixed;
bottom: 0px;
left: 0px;
width: 5px;
z-index: 9997;
background-color: #191970;
border-radius: 10px;
}
3] 바(bar) - 심화형
내가 설명할 '심화형'은 프로그레스 바의 '진행률(%)'이 '문서 전체'가 아닌 '본문 영역'을 기준으로 계산되게 하고, '진행률(%)'이 '100%'가 되면 프로그레스 바를 사라지게 하는 방법이다.
웹사이트 방문자가 느끼기에 시각적으로 큰 차이는 없으나, 개념 상 보다 정확한 프로그레스 바라고 할 수 있다.
3-1] 화면 상단
먼저 아래와 같이 프로그레스 바를 화면 상단에 적용하는 코드다. 잘 보면 알겠지만 프로그레스 바가 '본문 영역' 시작 부분에서 나타나고 종료 부분에서 '100%'가 되면서 사라진다.
3-1-1] HTML
아래 코드를 HTML에서 본문에 해당하는 entry-content div 코드 부분에 삽입한다.
'본문 영역'을 정하기 위해 <main>, </main> 코드를 entry-content div 코드 안에 삽입하고, ##_article_rep_desc_## 코드 위에 <main> 코드를, 아래에 </main> 코드를 삽입한다.
</div>
<!-- 프로그레스 바 시작 -->
<div id="progress-bar-container" class="progress-bar">
<span class="progress-bar-percentage"></span>
</div>
<div class="entry-content">
<main>
##_article_rep_desc_##
</main>
</div>
<script>
class ScrollProgressBar {
constructor(selector, root, target, callback) {
this.element = document.querySelector(selector);
this.root = document.querySelector(root) || document.documentElement;
this.target = document.querySelector(target);
this.callback = callback;
window.addEventListener("scroll", this.computeScroll.bind(this));
this.computeScroll();
}
computeScroll() {
const scrollPercent = ~~((this.root.scrollTop - this.target.offsetTop - this.target.parentElement.offsetTop) / (this.target.clientHeight - this.root.clientHeight) * 100);
if (this.callback && typeof this.callback === "function")
this.callback(scrollPercent);
}
}
let progressBar = new ScrollProgressBar("#progress-bar-container", null, "main", function(scrollPercent) {
if (scrollPercent > 100)
this.element.style.opacity = 1 - (scrollPercent - 100) / 1;
else this.element.style.opacity = 1;
this.element.style.width = this.element.querySelector("span").innerText = Math.max(0, Math.min(100, scrollPercent)) + "%";
});
</script>
<!-- 프로그레스 바 끝 -->
<s_tag_label>
3-1-2] CSS
아래 코드를 CSS에 삽입한다.
/* 프로그레스 바 */
.progress-bar {
position: fixed;
top: 0px; /* bottom: 0px; */
left: 0px;
width: 0px;
min-height: 10px;
background-color: #191970;
border-radius: 0px 5px 5px 0px;
display: flex;
justify-content: flex-end;
transition: width 500ms ease, opacity 500ms ease;
z-index: 9999;
}
.progress-bar-percentage {
display: block;
padding: 5px 10px;
color: #fff;
font-weight: 700;
}
3-2] 본문 상단
다음은 아래와 같이 프로그레스 바를 본문 상단에 적용하는 코드다.
3-2-1] HTML
'3-1-1'의 HTML 코드를 아래와 같이 수정한다.
[ 3-1-1 HTML 코드 ]
</div>
<!-- 프로그레스 바 시작 -->
<div id="progress-bar-container" class="progress-bar">
<span class="progress-bar-percentage"></span>
</div>
<div class="entry-content">
<main>
##_article_rep_desc_##
</main>
</div>
[ 3-2-1 HTML 코드 ]
</div>
<!-- 프로그레스 바 시작 -->
<div class="entry-content">
<div id="progress-bar-container" class="progress-bar">
<span class="progress-bar-percentage"></span>
</div>
<main>
##_article_rep_desc_##
</main>
</div>
3-2-2] CSS
'3-1-2'의 CSS 코드를 아래와 같이 수정한다.
/* 3-1-2 */
.progress-bar {
position: fixed;
border-radius: 0px 5px 5px 0px;
}
/* 3-2-2 */
.progress-bar {
position: sticky;
border-radius: 5px;
margin-bottom: 30px; /* 추가 */
}
3-3] 본문 좌측
다음은 아래와 같이 프로그레스 바를 본문 좌측에 적용하는 코드다. 코드는 정상 작동하는데, 본문의 길이에 따라 프로그레스 바가 화면을 빨리 벗어날 수도 있기 때문에 추천하지는 않는다.
3-3-1] HTML
본문에 해당하는 기존 <div class="entry-content"> 코드를 <div class="entry-content" id="progress-bar-content">로 수정한다.
'3-1-1'의 HTML 코드에서 40번째 줄에 있는 width를 height로 수정한다.
3-3-2] CSS
'3-1-2'의 CSS 코드를 아래와 같이 수정한다.
/* 3-1-2 */
.progress-bar {
position: fixed;
left: 0px;
width: 0px;
min-height: 10px;
border-radius: 0px 5px 5px 0px;
}
.progress-bar-percentage {
padding: 5px 10px;
color: #fff;
}
/* 3-3-2 */
.progress-bar {
position: absolute;
left: -60px;
width: 10px;
min-height: 20px;
border-radius: 5px;
align-items: flex-end; /* 추가 */
}
.progress-bar-percentage {
padding: 0px 15px;
color: #000;
}
#progress-bar-content { /* 추가 */
position: relative;
}
4] 서클(circle)
프로그레스는 바(bar)가 아닌 서클(circle) 형태로도 가능하며, 크게 바(bar)와 같이 '퍼센트' 형태와 '탑 버튼' 형태가 있다.
4-1] 퍼센트(percentage) 형태
먼저 아래와 같이 프로그레스 서클을 퍼센트 형태로 적용하는 코드다. 스크롤을 내리면 서클이 채워지면서 퍼센트도 올라간다.
4-1-1] HTML
아래 코드를 HTML에서 본문에 해당하는 entry-content div 코드 부분에 삽입한다.
<div class="entry-content">
##_article_rep_desc_##
<!-- 프로그레스 서클 시작 -->
<div class="progress-circle">
<svg>
<g><circle cx="0" cy="0" r="20" class="animated-circle" transform="translate(50,50) rotate(-90)" /></g>
<g><circle cx="0" cy="0" r="38" transform="translate(50,50)" /></g>
</svg>
<div class="progress-percentage"></div>
</div>
<script>
(function() {
var $w = $(window);
var $circle = $('.animated-circle');
var $progPres = $('.progress-percentage');
var wh = $w.height();
var h = $('.entry-content').height();
var sHeight = h - wh;
$w.on('scroll', function() {
var perc = Math.max(0, Math.min(1, $w.scrollTop()/sHeight));
updateProgress(perc);
});
function updateProgress(perc) {
var circle_offset = 126 * perc;
$circle.css( {
"stroke-dashoffset" : 126 - circle_offset
});
$progPres.html(Math.round(perc * 100) + "%");
}
}());
</script>
<!-- 프로그레스 서클 끝 -->
</div>
4-1-2] CSS
아래 코드를 CSS에 삽입한다.
/* 하단 우측 프로그레스 서클 */
.progress-circle {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
height: 100px;
}
.progress-percentage {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
color: #000;
}
svg {
position: absolute;
}
circle {
fill: rgba(255,255,255,0.9);
}
svg .animated-circle {
fill: transparent;
stroke-width: 40px;
stroke: #191970;
stroke-dasharray: 126;
stroke-dashoffset: 126;
}
4-2] 탑 버튼(top button) 형태
다음은 아래와 같이 프로그레스 서클을 탑 버튼 형태로 적용하는 코드다. 스크롤을 내리면 서클이 완성되고 버튼을 클릭하면 화면 최상단으로 이동한다.
4-2-1] HTML
아래 코드를 HTML에서 본문에 해당하는 entry-content div 코드 부분에 삽입한다.
<div class="entry-content">
##_article_rep_desc_##
<!-- 프로그레스 서클 시작 -->
<div class="progress-circle">
<input type="text" class="dial"/>
<div class="top-btn">▲</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/72900/jquery.knob.min.js"></script>
<script>
$(document).ready(function() {
var offset = 100,
scroll_top_duration = 700,
$go_top = $('.top-btn'),
$thedial = $('.dial'),
$progress_circle = $('.progress-circle');
// Initialize the progress dial
$thedial.knob( {
'min' : 0,
'max' : 100,
'width' : 50,
'height' : 50,
'fgColor' : 'rgba(25, 25, 112)',
'skin' : 'tron',
'thickness' : .2,
'displayInput' : false,
'displayPreview' : false,
'readOnly' : true
});
$(window).scroll(function() {
// Hide or show the progress bar
($(this).scrollTop() > offset) ? $progress_circle.addClass('is-visible') : $progress_circle.removeClass('is-visible');
// Get the window position and set it to a variale
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
// Bind the window position to the progress dial
$('.dial').val(scrollPercent).change();
});
//smooth scroll to top
$go_top.on('click', function(e) {
e.preventDefault();
$('body,html').animate( {
scrollTop: 0 ,
}, scroll_top_duration);
});
});
</script>
<!-- 프로그레스 서클 끝 -->
</div>
4-2-2] CSS
아래 코드를 CSS에 삽입한다.
/* 하단 우측 프로그레스 서클 */
.progress-circle {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
display: flex;
text-align: center;
visibility: hidden;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.progress-circle:hover {
cursor: pointer;
transform: scale(1.1);
}
.top-btn {
position: absolute;
width: 50px;
height: 50px;
font-size: 20px;
line-height: 50px;
color: #191970;
}
.is-visible {
visibility: visible;
opacity: 1;
}
728x90
반응형
