Search code examples
javascriptcsssvgcss-shapes

Arc progress bar

I need to make a circular progress bar (image below), loading start from left bottom side up to right bottom side. Light-blue (#E8F6FD) color is empty state and strong-blue (#1CADEB) is progress.

Arc progress bar

I have tried some approaches, but cannot find the best one for this implementation:

  1. First of all I tried using a div element with border-radius: 50%; and border-bottom-color: transparent;, jsfiddle. In this approach I got a shape exactly like in image but the problem is how can I fill border with progress?
  2. The second try was using canvas, and this approach is nice expect the reason that loader appears on the screen only after all JS loaded, I would like prevent this behavior and show loader immediately when page is loaded, jsfiddle

So my question is there any another approaches that can achive an arc loader or any suggestion for listed problems.

Solution

  • You can use an inline SVG with arc commands to make the arc shape. The animation can be handled with CSS by transitioning the stroke-dasharray property.

    Here is an example, hover the arc to launch the loading animation :

    svg {
  display: block;
  width: 40%;
  margin: 0 auto;
}
.loader {
  stroke-dasharray: .5 18 19;
  transition: stroke-dasharray 2s linear;
}
svg:hover .loader {
  stroke-dasharray: 19 0 19;
}
    <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>

    Note that you will need to add vendor prefixes to the transition property for browser support (more info on canIuse).