keyframes filling color in the circle with css and jquery

Question

As we scroll down the page, I want to fill the color in the circle as clockwise. I found a way to fill the color on the link https://codepen.io/HugoGiraudel/pen/BHEwo

<div class="wrapper">
  <div class="pie spinner"></div>
  <div class="pie filler"></div>
  <div class="mask"></div>
</div>

.wrapper {
  position: relative;
  margin: 40px auto;
  background: white;
}

@mixin timer($item, $duration, $size, $color, $border, $hover: running) {

  #{$item} { 
    width: $size;
    height: $size;
  }

  #{$item} .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: $color;
  }

  #{$item} .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
    animation: rota $duration + s linear infinite;
  }

  #{$item}:hover .spinner,
  #{$item}:hover .filler, 
  #{$item}:hover .mask {
    animation-play-state: $hover;    
  }

  #{$item} .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
    left: 50%;
    opacity: 0;
    z-index: 100;
    animation: opa $duration + s steps(1,end) infinite reverse;
    border-left: none;
  }

  #{$item} .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    animation: opa $duration + s steps(1,end) infinite;
  }

  @keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes opa {
    0% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
}

@include timer('.wrapper', 5, 250px, #08C, '5px solid rgba(0,0,0,0.5)');

if $(document).scrollTop() is between 100, it starts filling from 9o'clock, as $(document).scrollTop() is getting bigger then it fills as clockwise until it reaches to 1000.

Any way to implement this?

Answer 1

Add this JS code and change css with the one given below and you will get what you need.

JS

var wrapper=document.getElementsByClassName('wrapper')[0];
var spinner=document.getElementsByClassName('spinner')[0];
var filler=document.getElementsByClassName('filler')[0];
var mask=document.getElementsByClassName('mask')[0];
var count=0;
window.addEventListener('scroll',function(){
        
     var scrolled=window.scrollY;
     spinner.style.transform="rotate(" + scrolled+ "deg)";
    if(count%2==0)
    {
    if(scrolled>=180){
      filler.style.opacity=1;
    mask.style.opacity=0;  
    count++;  
    }
    }
  else{
    if(scrolled<=180){
      filler.style.opacity=0;
    mask.style.opacity=1;  
    count++;  
    }
  }
  
  
  if(scrolled>=360)
  {
    if(scrolled==360)
    {
    mask.style.opacity=0;
    }
    spinner.style.transform="rotate(360deg)";
  }
    
})

CSS

@import "compass/css3";
body{
  min-height:2400px;
}
.wrapper {
  position: fixed;
  margin: 40px auto;
  background: white;
}

@mixin timer($item, $duration, $size, $color, $border, $hover: running) {
  #{$item}, #{$item} * { @include box-sizing(border-box); }

  #{$item} { 
    width: $size;
    height: $size;
  }

  #{$item} .pie {
    width: 50%;
    height: 100%;
    transform-origin: 100% 50%;
    position: absolute;
    background: $color;
    border: #{$border};
  }

  #{$item} .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    z-index: 200;
    border-right: none;
  }

  #{$item}:hover .spinner,
  #{$item}:hover .filler, 
  #{$item}:hover .mask {
    animation-play-state: $hover;    
  }

  #{$item} .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0; 
    left: 50%;
    opacity: 0;
    z-index: 100;
    border-left: none;
  }

  #{$item} .mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
  }

  @keyframes rota {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes opa {
    0% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
}

@include timer('.wrapper', 5, 250px, #08C, '5px solid rgba(0,0,0,0.5)');

This will work

Answer 2

If you are having a problem in downloading Sass below is the code without compass component just pure css.

This will work in your apache server.

var timer=document.getElementsByClassName('timer')[0];
var timer_1=document.getElementsByClassName('timer_1')[0];
timer_1.style.transform="rotate(360deg)";
timer_1.style.background="#ddd";

window.addEventListener('scroll',function(){

     var scrolled=window.scrollY;
     var diff=scrolled-180;
   
    if(scrolled>=0 && scrolled<=180 ){
        
        timer_1.style.background="#ddd";
        timer_1.style.transform="rotate("+(360-scrolled)+"deg)";
        if(scrolled==180){
        timer_1.style.transform="rotate(180deg)";   
        }
    }
    else{
    if(scrolled>=180.0001){
timer_1.style.background="#6c6";
timer_1.style.transform="rotate("+(360-diff)+"deg)";
if(scrolled>=360){
timer_1.style.transform="rotate(180deg)";   
    }
}
    }

  
})

body{
            min-height: 3000px;
        }
        .timer {  margin-top:100px;background: linear-gradient(90deg, #6c6 50%, #ddd 50%); border-radius: 50%; height: 6em; position: fixed; width: 6em; }
         .timer_1 {  border-radius: 100% 0 0 100% / 50% 0 0 50%; content: ''; height: 100%; left: 0; position: absolute; top: 0; transform-origin: 100% 50%; width: 50%;}
         p{
            font-size: 20px;
            font-family:'arial';
            margin-left: 500px;
            width: 60%;
         }

<div class="timer">
    <div class="timer_1"></div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</p>