0

I'm trying to achieve something like this WITHOUT using the SVG:

https://codepen.io/arforcee/pen/erbKi?limit=all&page=2&q=circular+loader

Is this possible at all and if so, could someone please advice on this?

The CSS with SVG is this:

@import "compass/css3";

$radius: 100px; //also set the attribute in html
$stroke-width: 10px; //also set the attribute in html
$circle-stroke-color: red;
$circle-fill-color: #3ab54a;
$animation-duration: 60s;

.circle {
  @include animation(load $animation-duration ease-in-out);
  @include transform(rotate(-90deg));
  @include transform-origin($radius + $stroke-width);
  fill: $circle-fill-color;
  stroke: $circle-stroke-color;
  stroke-dasharray: ($radius * 2) * pi(); //C = πd
}

@include keyframes(load) {
  from {
    stroke-dashoffset: ($radius * 2) * pi(); //C = πd
  }
  to {
    stroke-dashoffset: 0;
  }
}
David Hope
  • 1,426
  • 4
  • 21
  • 50

1 Answers1

1

There is an interesting one i found here. It effectively creates a circular element by applying border-radius: 100%;

It then applies a different colour for border-top so that only a quarter of the border is highlighted. The entire element is then rotated using the keyframes animation you can see in the example.

You could take the example and add a background-color, play with the border colors and create what you're after

hairmot
  • 2,975
  • 1
  • 13
  • 26
  • filling the background would only work (i think) if the div is not circular. like this: https://stackoverflow.com/questions/19160147/animate-background-color-like-a-progress-bar-in-jquery – David Hope Sep 08 '17 at 16:51