Tips for creating animated arc fills using CSS

Question

Tips for creating animated arc fills using CSS

Can we gradually fill the color of a CSS semi-circle in a counterclockwise direction, similar to a progress bar?

Here is the code for the semi-circle: https://jsfiddle.net/sonymax46/wqfovdjh/7/.


.cc{
    background-color: transparent;
    overflow: hidden;
    width: 80px;
}
.curve {
    height: 60px;
    width: 100%;
    background-color: none;
    border-radius: 50%;
    border: 2px solid blue;
    transform: translateX(50%);
}

I would like the current blue color to be replaced with green upon triggering an event. How can this be achieved using CSS or SVG?

Thank you in advance.

javascript html css svg

Answer 1

Answer №1

Option A involves using a container that cuts off a circular element and a pseudo-class as a "mask" over the circle. A gradient background then reveals a different color when the element is rotated.

The main downside to this method is that you need a solid color background for the overlay to match visually.

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  /* just to show the box could be transparent */
  background-color: lightgray;
  cursor: pointer;
}

.arc {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* Use relative on parent so mask aligns */
  left: 50%;
  /* Move the circle 'outside' the wrapper */
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.arc:after {
  /* this creates the 'mask' */
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: white;
  border-radius: 50%;
}

.wrapper:hover .arc {
  /* rotate the full element because we can't transition backgrounds */
  transform: rotate(-180deg);
}

.gradientExample {
  /* just to show the gradient */
  height: 20px;
  width: 200px;
  margin: 0 20px;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the arc</p>
<div class="wrapper">
  <div class="arc"></div>
</div>
<div class="gradientExample"></div>

Option B suggests using a clip-path instead of overlapping elements. This option is more efficient, but it requires creating an SVG object for the arc, which can be challenging in terms of sizing.

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: lightgray;
  cursor: pointer;
}

.svgArc {
  width: 100%;
  height: 100%;
  position: relative;
  clip-path: url(#svgPath);
}

.svgArc:after {
  /* have to use a pseudo element because we can't rotate the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.v2:hover .svgArc:after {
  transform: rotate(180deg);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the gray square</p>

<div class="wrapper v2">
  <div class="svgArc">

  </div>
</div>

<svg width="0" height="0" viewBox="0 0 200 200">
    <defs>
        <clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
        </clipPath>
    </defs>
</svg>

Option C presents the idea of creating an SVG circle and animating the offset-path. For more details and an example, refer to this link: How to make linear css transition to SVG path?

Answer 2

Option A involves using a container that cuts off a circular element and a pseudo-class as a "mask" over the circle. A gradient background then reveals a different color when the element is rotated.

The main downside to this method is that you need a solid color background for the overlay to match visually.

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  /* just to show the box could be transparent */
  background-color: lightgray;
  cursor: pointer;
}

.arc {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  /* Use relative on parent so mask aligns */
  left: 50%;
  /* Move the circle 'outside' the wrapper */
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.arc:after {
  /* this creates the 'mask' */
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background-color: white;
  border-radius: 50%;
}

.wrapper:hover .arc {
  /* rotate the full element because we can't transition backgrounds */
  transform: rotate(-180deg);
}

.gradientExample {
  /* just to show the gradient */
  height: 20px;
  width: 200px;
  margin: 0 20px;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the arc</p>
<div class="wrapper">
  <div class="arc"></div>
</div>
<div class="gradientExample"></div>

Option B suggests using a clip-path instead of overlapping elements. This option is more efficient, but it requires creating an SVG object for the arc, which can be challenging in terms of sizing.

.wrapper {
  margin: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: lightgray;
  cursor: pointer;
}

.svgArc {
  width: 100%;
  height: 100%;
  position: relative;
  clip-path: url(#svgPath);
}

.svgArc:after {
  /* have to use a pseudo element because we can't rotate the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
  transition: transform 1s ease;
}

.v2:hover .svgArc:after {
  transform: rotate(180deg);
}

p {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 20px 20px 0 20px;
}

<p>Hover over the gray square</p>

<div class="wrapper v2">
  <div class="svgArc">

  </div>
</div>

<svg width="0" height="0" viewBox="0 0 200 200">
    <defs>
        <clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
        </clipPath>
    </defs>
</svg>

Option C presents the idea of creating an SVG circle and animating the offset-path. For more details and an example, refer to this link: How to make linear css transition to SVG path?

Answer 3

Answer №2

Consider using CSS custom variables for this?

const Root   = document.documentElement
  ,  btColor = document.getElementById('bt-color')
  ;
btColor.onclick=_=>
  {
  Root.style.setProperty('--bColor', 'green')
  }

:root {
  --bColor  : blue;
  }
.cc{
  background-color: transparent;
  overflow: hidden;
  width: 80px;
  }
.curve {
  height: 60px;
  width: 100%;
  background-color: none;
  border-radius: 50%;
  border: 2px solid var(--bColor);
  transform: translateX(50%);
  }

<div class="cc">
  <div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

Answer 4

Consider using CSS custom variables for this?

const Root   = document.documentElement
  ,  btColor = document.getElementById('bt-color')
  ;
btColor.onclick=_=>
  {
  Root.style.setProperty('--bColor', 'green')
  }

:root {
  --bColor  : blue;
  }
.cc{
  background-color: transparent;
  overflow: hidden;
  width: 80px;
  }
.curve {
  height: 60px;
  width: 100%;
  background-color: none;
  border-radius: 50%;
  border: 2px solid var(--bColor);
  transform: translateX(50%);
  }

<div class="cc">
  <div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

Tips for creating animated arc fills using CSS

Answer №1

Answer №2

Similar questions

How can I include a path prefix to globs provided to gulp.src?

Merging an AppBar and Drawer in Material UI for a seamless user interface design

Ways to organize interconnected form elements on a PHP webpage

A step-by-step guide to setting up a custom splash screen for React Native

Typescript: Add a new variable preceding a specified string

Can jQuery help me identify which <input type='image> was clicked within a form containing several submit images?

What specific quirk in Firefox is responsible for this behavior, and is there a way to replicate it in standards mode?

The component is no longer able to locate the imported element when it is being shared

Assistance with the Chakra UI Range Slider in React

FlexNav excluding

During development, getStaticPaths and getStaticProps successfully function, however, the prop during build time becomes undefined

How can I make a div move to the position of another div and stay with it when the screen is resized?

Dawn Break Alarm Timepiece - Online Platform

I am unable to determine if I have already selected a List Item

Is there a way to align these blocks in a single row?

What is the purpose of using a visually striking and prominent HTML tag?

Tips for ending a page prematurely

Navigating the issue of updateMany not functioning properly in mongoose and nodejs

How can I incorporate dashed borders between images using CSS?

Tips for adjusting the placement of enlarged images within colorbox