Full progress spinner pure css

Question

So, i have a CSS progress spinner, that that took 10 seconds to full load, with this code:

.loader {
  border: 16px solid #d4d8da;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 10s linear infinite;
  animation: spin 10s linear  infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

And the HTML:

<div class="loader"></div>

But I cant figure out how to fill the hole grey circle according to the progress/time.

Can you help-me please?

Thank you.

https://jsfiddle.net/6Ln61q0b/

It seems to spin just fine, what do you mean by "according to progress/time"? If you mean you want to have it work according to certain download progress or something, you'll first have to know this information. — Salketer, Sep 06 '17 at 14:12
I mean, after the 10 seconds i need the hole circle blue, but now the blue part fills only a quarter of the circle — Raphael Telatim, Sep 06 '17 at 14:25
Are you looking for something like this? https://css-tricks.com/css-pie-timer/ — Yuan Shing Kong, Sep 06 '17 at 14:27
The techniques for doing such a pie timer are somewhat complicated... You'd be better with a tutorial. — Salketer, Sep 06 '17 at 14:35
Duplicate - https://stackoverflow.com/questions/5001002/how-to-create-circular-progresspie-chart-like-indicator — Paulie_D, Sep 06 '17 at 14:58
Then I'd suggest SVG. but google is your friend here...there's lots of CSS examples you coudl adapt - https://www.google.co.uk/search?q=pure+css+circle+progress+bar&oq=pure+css+ci&aqs=chrome.2.69i57j0l5.5263j0j1&sourceid=chrome&ie=UTF-8 — Paulie_D, Sep 06 '17 at 15:51

score 0 · Answer 1 · answered Sep 06 '17 at 17:42

This code did the trick for me:

@import "compass/css3";

.wrapper {
  position: relative;
  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;
    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, '1px solid white');

And the HTML

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

https://codepen.io/HugoGiraudel/pen/BHEwo

Thanks to everyone.

Full progress spinner pure css

1 Answers1