1

enter image description here

How can i create this progress bar with 80% circle and multiple gradient colors support

Faizan Ali
  • 37
  • 5

1 Answers1

1

You can use a library called react-native-svg-path-gradient for this to work you'll also need react-native-svg.

You can provide multiple colors and have rounded edges. It does however need you to provide a d prop for the path.

import GradientPath from "react-native-svg-path-gradient";
import { Svg } from "react-native-svg";

<Svg height="100%" width="100%" viewBox="-2 -2 295 256">
  <GradientPath
    d={
      "M55.5,237.2c-23.5-23.3-38.1-55.6-38.1-91.3C17.3,75,74.8,17.5,145.7,17.5C216.5,17.5,274,75,274,145.9  c0,35.7-14.6,68-38.1,91.3"
    }
    colors={["#EA8279", "#E8C579", "#8DD660", "#E8C579", "#EA8279"]}
    strokeWidth={35}
    roundedCorners
  />
</Svg>
RubenSmn
  • 4,091
  • 2
  • 5
  • 24
  • How we can reduce the progress size for example i want to become this progress circle to half or 60 percent where i need to change? – Faizan Ali Feb 13 '23 at 11:25
  • You can visit this website; [svg-path-visualizer.netlify.app](https://svg-path-visualizer.netlify.app/#M55.5%2C237.2c-23.5-23.3-38.1-55.6-38.1-91.3C17.3%2C75%2C74.8%2C17.5%2C145.7%2C17.5C216.5%2C17.5%2C274%2C75%2C274%2C145.9%20%20c0%2C35.7-14.6%2C68-38.1%2C91.3) which helps you visualize what is going on with the path. Unfortunately my knowledge is to limited on svg's to help you further. This is however a great question: **How to grow a svg path?** – RubenSmn Feb 13 '23 at 13:13