進度條一般都是搭配文章使用，
主要是告訴使用者目前閱讀到哪裡～
這是我自己非常喜歡的網頁設計，
讓你可以預設自己閱讀的進度，安排自己時間～（太長就快逃啊！）

看到了這個codepden的案例也搭配在網頁使用！
覺得體驗很好！主要就是告訴使用者這一頁已經滾到哪裡了，
當網頁配置太長時，搭配這樣的進度條，配合回到最上面的圖示，一舉數得！

先來看一下仿製的效果(搭配前天的進場效果一起！)：
注意看右下角

這邊主要是利用SVG dashoffset來做進度條的感覺。

dashoffset會控制線的位置，之後再SVG也會再看到喔
另外也用JS去算滾動的距離/真文件長度

真文件長度 = 文件長度 - 視窗長度才是我們要的真正長度，不然滑到最下面還會多一塊！

pageHeight = document.body.clientHeight - window.innerHeight;
我們要算的比例 = window.scrollY / pageHeight

上code說明！

//HTML
<svg height="60" width="60" class="to-top">
    <circle class="" cx="30" cy="30" r="28" stroke="grey" stroke-width="3" />
    <circle class="progress" cx="30" cy="30" r="28" stroke="white" stroke-width="3" />
  <g class="arrow" id="arrow" data-name="Group 62" >
    <line class="line" id="Line_left" data-name="Line 13" x1="0" y1="18" x2="16" y2="0" fill="none" stroke="#ffffff" stroke-width="3"/>
    <line class="line" id="Line_right" data-name="Line 14" x1="14" y1="0" x2="30" y2="18" fill="none" stroke="#ffffff" stroke-width="3"/>
	</g>
</svg>

//SCSS
svg{
  position: fixed;
  bottom:5%;
  right: 5%;
  opacity: 0;
  z-index: 3;
  transition: 0.3s;
  cursor: pointer;
  
  .progress{
  --dashOffset: 300;//這有試了一下大概是300-100會讓線跑一圈
  stroke-dasharray: 300;
  stroke-dashoffset: var(--dashOffset); //這次想用變數設定看看！
  transform: rotate(-90deg);//讓線出來的
  transform-origin: center;
  }
  .arrow{
    transform: translate(25%, 30%);
    animation: arrow 2s infinite ease-in;
  }
  
}

@keyframes arrow{
  0%, 30%{
    transform: translate(25%, 30%);
    opacity: 1;
  }
  80%{
    transform: translate(25%, 12%);
    opacity: 0.3;
  }
  90%,100%{
    transform: translate(25%, 8%);
    opacity: 0;
  }
}

//JS
const pageHeight = document.body.clientHeight - window.innerHeight;
const circle = document.querySelector('.progress');
const svg = document.querySelector('svg');

document.addEventListener('scroll',function(){
  let scrollPos =  window.scrollY 
  
	//讓滾動的時候才跑出來
  if(!scrollPos) svg.style.opacity = 0;
  if(scrollPos) svg.style.opacity = 1;

	//滾動的距離去算圈圈的線要出來多少
  let darshOffset = 300 - scrollPos/pageHeight * (300 - 100);

	//設定變數，這樣如果有其他class也用到，就可以一起改了！
  circle.style.setProperty('--dashOffset', darshOffset);
	
	//當然也可以直接設定style,上下選一個就行～
  // circle.style.strokeDashoffset =  darshOffset;
})

以上！

今天的code在這裡

有任何問題/錯誤歡迎留言～