How to set the gradient color for the React Progress bar?

Description

This article shows how to set the gradient color for the React Progress bar.

Solution

A gradient color refers to a visual effect where colors smoothly transition from one hue to another, creating a gradient or spectrum of colors. This gradient color is filled in the Progress bar by using the progressColor property in the progress bar. You can create a linear-gradient SVG and then set the ID of it to the progressColor property in the Progress bar.

Code Snippet

<ProgressBarComponent
               id="lineardeterminate"
               ref={(linear1) => (linearOne = linear1)}
               type="Linear"
               cornerRadius="Round"
               trackThickness={15}
               progressThickness={15}
               trackColor="#EEF7FE"
               progressColor="url(#gradient-bar)"
               value={60}
               animation={{
                 enable: false,
                 duration: 2000,
                 delay: 0,
               }}
               load={progressLoad.bind(this)}
>
<svg height="0px" width="0px">
   <defs>
       <linearGradient
           id="gradient-bar"
           x1="10"
           y1="183.9"
           x2="184"
           y2="358"
           gradientUnits="userSpaceOnUse">
            <stop offset="0%" stop-color="#6BBBE3" stop-opacity="1" />
            <stop offset="55.4%" stop-color="#3E8AB0" stop-opacity="1" />
        </linearGradient>
   </defs>
 </svg>
 </ProgressBarComponent>

The following image illustrates the output of the above code.

View Sample in Stackblitz