Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: animation speed with animation step #192

Open
x1c0 opened this issue Nov 17, 2023 · 0 comments
Open

Bug: animation speed with animation step #192

x1c0 opened this issue Nov 17, 2023 · 0 comments

Comments

@x1c0
Copy link

x1c0 commented Nov 17, 2023

when setting animationStep > 1 then the progressColors do not work

working example animationStep: 1

const weight = 130;
const percent = (weight * 100) / 130;

circliful.newCircle({
  percent,
  id: 'circle9',
  type: 'simple',
  backgroundCircleWidth: 10,
  foregroundCircleWidth: 11,
  strokeLinecap: 'round',
  animationStep: 1,
  noPercentageSign: true,
  text: `${weight} / 130g`,
  textReplacesPercentage: true,
  progressColors: [
    { percent: 1, color: 'orange' },
    { percent: 100, color: 'green' },
  ],
});

result
image

if I want a faster animation (animationStep: 2), the progress color never gets to green

circliful.newCircle({
  percent,
  id: 'circle9',
  type: 'simple',
  backgroundCircleWidth: 10,
  foregroundCircleWidth: 11,
  strokeLinecap: 'round',
  animationStep: 2,
  noPercentageSign: true,
  text: `${weight} / 130g`,
  textReplacesPercentage: true,
  progressColors: [
    { percent: 1, color: 'orange' },
    { percent: 100, color: 'green' },
  ],
});

result:
image

I have the code in stackblitz but this link despite having the code, does not render the chart (even tho for me it does)
https://stackblitz.com/edit/js-xgfsfk?file=index.js

Thanks for having a look!

@x1c0 x1c0 changed the title animation speed with animation step Bug: animation speed with animation step Nov 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant