Circle border gradient color in HTML CSS

Question

I made a circle border animation for loading by html and css:

<div class="spin"></div>

@keyframes spinner {
0% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
}

100% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
}    
.spin::before {
    animation: 2s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 6px blue;
    border-bottom-color: transparent;
    border-radius: 100%;
    content: "";
    height: 70px;
    width: 70px;
    position: absolute;
    top: 90%;
    left: 90%;
    transform: translate3d(-50%, -50%, 1);
    will-change: transform;
    margin-top: -70px;
}

It looks like this:

1.How to set gradient color for circle border?

2.How to set border radius for circle border?

like this :

![][2]

Finally I used this SVG file :

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25.8524mm" height="25.8524mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 158.05 158.05"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#2C80EB;fill-rule:nonzero}
   ]]>
  </style>
   <mask id="id0">
  <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="79.79" y1="128.31" x2="146.43" y2="131.43">
   <stop offset="0" style="stop-opacity:1; stop-color:white"/>
   <stop offset="0.34902" style="stop-opacity:0.501961; stop-color:white"/>
   <stop offset="1" style="stop-opacity:0; stop-color:white"/>
  </linearGradient>
    <rect style="fill:url(#id1)" width="158.05" height="158.05"/>
   </mask>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" style="mask:url(#id0)" d="M79.02 0c3.57,0 6.47,2.9 6.47,6.47 0,3.57 -2.9,6.47 -6.47,6.47 -18.25,0 -34.77,7.4 -46.73,19.35 -11.96,11.96 -19.35,28.48 -19.35,46.73 0,18.25 7.4,34.77 19.35,46.73 11.96,11.96 28.48,19.35 46.73,19.35 18.25,0 34.77,-7.4 46.73,-19.35 11.96,-11.96 19.35,-28.48 19.35,-46.73 0,-3.57 2.9,-6.47 6.47,-6.47 3.57,0 6.47,2.9 6.47,6.47 0,21.82 -8.85,41.58 -23.15,55.88 -14.3,14.3 -34.06,23.15 -55.88,23.15 -21.82,0 -41.58,-8.85 -55.88,-23.15 -14.3,-14.3 -23.15,-34.06 -23.15,-55.88 0,-21.82 8.85,-41.58 23.15,-55.88 14.3,-14.3 34.06,-23.15 55.88,-23.15z"/>
 </g>
</svg>

score 1 · Answer 1 · answered Apr 26 '23 at 06:46

border-radius is ignored if we use a background-image to give the gradient effect.

So instead this snippet uses a combination of a radial and a conic gradient to create a circle whose colors go from blue to transparent.

<div class="spin"></div>
<style>
  @keyframes spinner {
    0% {
      transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
  }
  
  .spin::before {
    animation: 2s linear infinite spinner;
    animation-play-state: inherit;
    background-image: radial-gradient(white 0 60%, transparent 40% 100%), conic-gradient(blue 0deg, transparent 360deg);
    border-radius: 100%;
    content: "";
    height: 70px;
    width: 70px;
    position: absolute;
    top: 90%;
    left: 90%;
    transform: translate3d(-50%, -50%, 1);
    will-change: transform;
    margin-top: -70px;
  }
</style>

Circle border gradient color in HTML CSS

1 Answers1