Arc lane

Question

I need to make a circular progress bar (image below), start loading from the lower left side to the lower right side. Blue (#E8F6FD)is an empty state, and blue-blue (#1CADEB)is progress.

I tried some approaches, but cannot find a better option for this implementation:

• First of all, I tried using the element divwith border-radius: 50%;and border-bottom-color: transparent;, jsfiddle . With this approach, I got a form that looks like an image, but the problem is, how can I fill the border with progress?
• canvas, , , JS, , jsfiddle

, , - , .

Answer 1

SVG . CSS, stroke-dasharray.

, , :

svg {
  display: block;
  width: 40%;
  margin: 0 auto;
}
.loader {
  stroke-dasharray: 0 18 18;
  transition: stroke-dasharray 2s linear;
}
svg:hover .loader {
  stroke-dasharray: 18 0 18;
}

<svg viewbox="0 0.5 10 8">
  <path d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.78" stroke="#E8F6FD" />
  <path class="loader" d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.8" stroke="#00ACEE" />
</svg>

Hide result

, ( canIuse).

Answer 2

SVG

SVG CSS.
, XD , , svg stroke-dasharray; , .

body {
  background-color: #222;
}
.load {
  fill: none;
  stroke: #e8f6fd;
  stroke-width: 5;
  stroke-dasharray: 200 300;
  transform: rotate(142deg);
  transform-origin: 50px 50px;
  animation: progress 5s linear reverse;
}
@keyframes progress {
  from {
    stroke-dasharray: 200 300;
  }
  to {
    stroke-dasharray: 0 300;
  }
}
.spesial {
  stroke: #1cadeb;
  stroke-dasharray: 5 300;
  transform: rotate(30deg);
  animation: circpro 5s linear;
}
@keyframes circpro {
  from {
    transform: rotate(-220deg);
  }
  to {
    transform: rotate(30deg);
  }
}

<svg viewBox="0 0 100 100" width="200px">
  <circle class="load" cx="50" cy="50" r="45" />
  <circle class="load spesial" cx="50" cy="50" r="45" />
</svg>

Hide result