vydimitrov / react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Gradient Not Working for Web #198

djaffer opened this issue · comments

The gradient still not working as before. It is different from before. Also, colors time can we skip sending like before.

colors={[['#004777', 0.33], ['#F7B801', 0.33], ['#A30000']]}

This is how it looks with the suggested svg from #198.

<svg>
  <defs>
    <linearGradient id="countdown-circle-timer-gradient" x1="1" y1="0" x2="0" y2="0">
      <stop offset="0" stop-color="#004777" />>
      <stop offset="0.33" stop-color="#004777"/>
      <stop offset="0.66" stop-color="#F7B801"/>
      <stop offset="1" stop-color="#A30000" />
    </linearGradient>
  </defs>
</svg>
<CountdownCircleTimer colors="url(#countdown-circle-timer-gradient)">
  {({ remainingTime }) => remainingTime}
</CountdownCircleTimer>

stopwatch-suggested

Desired Color:
stopwatch

I think it had nothing to do with gradient.

colors={['#004777', '#F7B801', '#A30000', '#A30000']}
colorsTime={[duration, duration* 0.66, duration * 0.33, 0]}