.progress-wrap {
  position:fixed;
  right:50px;
  bottom:50px;
  height:46px;
  width:46px;
  cursor:pointer;
  display:block;
  border-radius:50px;
  box-shadow:inset  0 0 0 2px rgba(255,255,255,0.3);
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transform: translateY(15px);
  -webkit-transition:all 200ms linear;
  transition:all 200ms linear;
}
 
.progress-wrap.active-progress {
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
 
.progress-wrap::after {
  position:absolute;
  content:'\21E1';
  text-align:center;
  line-height:46px;
  font-size:24px;
  color:#ecedf3;
  left:0;
  top:0;
  height:46px;
  width:46px;
  cursor:pointer;
  display:block;
  z-index:1;
  -webkit-transition:all 200ms linear;
  transition:all 200ms linear;
}
 
.progress-wrap:hover::after {
  opacity:0;
}
 
.progress-wrap::before {
  position:absolute;
  content:'\21E1';
  text-align:center;
  line-height:46px;
  font-size:24px;
  opacity:0;
  background-image: linear-gradient(298deg,#81c14b,#81c14b);
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent;
  left:0;
  top:0;
  height:46px;
  width:46px;
  cursor:pointer;
  display:block;
  z-index:2;
  -webkit-transition:all 200ms linear;
  transition:all 200ms linear;
}
 
.progress-wrap:hover::before {
  opacity:1;
}
 
.progress-wrap svg path {
  fill:none;
}
 
.progress-wrap svg.progress-circle path {
  stroke:rgb(129, 193, 75);
  stroke-width:4;
  box-sizing:border-box;
  -webkit-transition:all 200ms linear;
  transition:all 200ms linear;
}