Creating a unique-looking visual representation of progress with arcs

Question

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB).

https://i.sstatic.net/VZ9Lg.png

I've experimented with a few approaches, but haven't found the ideal solution for this implementation:

Initially, I tried using a div element with styles like border-radius: 50%; and
```
border-bottom-color: transparent;
```
, here's a jsfiddle. While I achieved the desired shape, I struggled with how to fill the border with progress.
My second attempt involved using canvas, which worked well except that the loader only appeared after all JS was loaded. I wanted to avoid this delay and have the loader display immediately when the page loads, jsfiddle.

Are there any alternative methods to create an arc loader or suggestions to overcome the challenges mentioned above?

javascript css svg css-shapes

Answer 1

Answer №1

If you want to create an arc shape, consider using inline SVG with arc commands. To animate the arc, you can utilize CSS to transition the stroke-dasharray property.

Check out this example where hovering over the arc triggers a 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>

Remember to include vendor prefixes for the transition property to ensure browser compatibility (more details on canIuse).

Answer 2

If you want to create an arc shape, consider using inline SVG with arc commands. To animate the arc, you can utilize CSS to transition the stroke-dasharray property.

Check out this example where hovering over the arc triggers a 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>

Remember to include vendor prefixes for the transition property to ensure browser compatibility (more details on canIuse).

Answer 3

Answer №2

Unique SVG Animation

Check out this innovative circle animation created using only SVG and CSS.
It took quite some time to perfect the timings and effects, resulting in a visually captivating loading animation.

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>

Answer 4

Unique SVG Animation

Check out this innovative circle animation created using only SVG and CSS.
It took quite some time to perfect the timings and effects, resulting in a visually captivating loading animation.

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>

Answer 5

Answer №3

Presenting a Solution Using HTML, CSS, and JS:

The key aspect of this implementation relies on utilizing conic-gradient() in CSS. For more details, you can explore the following resources: MDN Documentation on Conic Gradient. It is also essential to understand how absolute positioning functions. Refer to the code snippet below for the solution.

Check out the Demo: https://i.sstatic.net/B8OvX.gif

Additional Information: If you are interested in creating a dynamic and customizable progress meter through a reusable component, feel free to take a look at my Angular-based solution available in the demo below.

Explore the Demo: https://i.sstatic.net/AgqmV.gif

Access the Source Code Link (CodeSandbox): https://codesandbox.io/p/sandbox/progress-me-6s9cxm

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function handleOnStartProgressMeterClick() {
  let testMeterPercentage = 0;
  const outerCircle = document.getElementById("outer-circle");
  
  // mock delay
  (async() => {
    while (testMeterPercentage <= 75) {
    
      outerCircle.style.setProperty('background-image', 'conic-gradient(' +
        '#00acee' +
        ' ' +
        ((360 / 100) * testMeterPercentage) +
        'deg, ' + '#e8f6fd' +
        ' ' +
        ((360 / 100) * testMeterPercentage) +
        'deg 270deg, ' + 'white 270deg 360deg)'

      );
      testMeterPercentage++;
      await delay(30);
    }
  })();

}

.outer-circle {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  transform: rotate(225deg);
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% - (10px * 2));
  width: calc(100% - (10px * 2));
  transform: translateX(-50%) translateY(-50%);
  border-radius: 100%;
  background: white;
}

<div class="outer-circle" id="outer-circle">
  <div class="inner-circle" id="inner-circle">
  </div>
</div>
<button onclick="handleOnStartProgressMeterClick()">Start Progress Meter</button>

Answer 6

Presenting a Solution Using HTML, CSS, and JS:

The key aspect of this implementation relies on utilizing conic-gradient() in CSS. For more details, you can explore the following resources: MDN Documentation on Conic Gradient. It is also essential to understand how absolute positioning functions. Refer to the code snippet below for the solution.

Check out the Demo: https://i.sstatic.net/B8OvX.gif

Additional Information: If you are interested in creating a dynamic and customizable progress meter through a reusable component, feel free to take a look at my Angular-based solution available in the demo below.

Explore the Demo: https://i.sstatic.net/AgqmV.gif

Access the Source Code Link (CodeSandbox): https://codesandbox.io/p/sandbox/progress-me-6s9cxm

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function handleOnStartProgressMeterClick() {
  let testMeterPercentage = 0;
  const outerCircle = document.getElementById("outer-circle");
  
  // mock delay
  (async() => {
    while (testMeterPercentage <= 75) {
    
      outerCircle.style.setProperty('background-image', 'conic-gradient(' +
        '#00acee' +
        ' ' +
        ((360 / 100) * testMeterPercentage) +
        'deg, ' + '#e8f6fd' +
        ' ' +
        ((360 / 100) * testMeterPercentage) +
        'deg 270deg, ' + 'white 270deg 360deg)'

      );
      testMeterPercentage++;
      await delay(30);
    }
  })();

}

.outer-circle {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  transform: rotate(225deg);
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% - (10px * 2));
  width: calc(100% - (10px * 2));
  transform: translateX(-50%) translateY(-50%);
  border-radius: 100%;
  background: white;
}

<div class="outer-circle" id="outer-circle">
  <div class="inner-circle" id="inner-circle">
  </div>
</div>
<button onclick="handleOnStartProgressMeterClick()">Start Progress Meter</button>

Creating a unique-looking visual representation of progress with arcs

Answer №1

Answer №2

Unique SVG Animation

Answer №3

Presenting a Solution Using HTML, CSS, and JS:

Similar questions

Error: The request to /api/auth/login in Postman failed unexpectedly

How can you incorporate a value into a variable in PHP?

Rendering HTML or links sourced from encoded JSON data with JavaScript

My goal is to exclusively create illustrations of items within a camera's view

React is unable to identify the `InputProps` prop when applied to a DOM element

Converting an unbroken series of string values into organized key-value pairs for easy reference

Angular/JS encountered a premature end of program unexpectedly

Container slide-show fill error

Filtering dynamically generated table rows using Jquery

Discovering the keycode for the GO button in JavascriptDiscovering the keycode

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

Is it possible to pass an AngularJS ng-form object as a parameter in ng-if?

Filtering data with React's multiselect checkboxes

Real-time preview of a text field in JavaScript

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

I am currently working with an input element that is set to hidden. I am trying to change its type to text using JavaScript, but I can't seem to figure out how to do it or if it is even possible

Error 422 encountered while trying to create a new asset using the Contentful Content Management API

Enhancing Function Calls for Better Performance in V8

How can I find the last element that was selected using XPath in the browser console

Exploring Highcharts Pie Chart with AJAX for Real-time Data Updates