Great, but needs control of speed

[matthlavacka]

Thanks for making this, I wish there was control of speed though.

[matthlavacka]

To control speed one can do the following:

addPercent() {
  const self = this;
  this.setState({
    percent: this.state.percent + 1,
  });
  setTimeout(function(){ self.changeState(); }, 100);
}

changeState() {
  this.state.percent <= 99 ? this.addPercent() : this.setState({percent: 100});
}

[iamjayk]

return a div element and do some css animations with it

set that div className="someExampleName"

control from css

.someExampleName {
animation: speed-control linear 0.9s;                  // specify seconds for speed control
}

@keyframes speed-control {
0% { height/width/: Whatever }
50%{  height/width: increment }
100%{ height/width: to final position }

// OR //

from { }
to { } 
}

[jwmann]

@ajayk800 Can you give a more complete example? In theory this can work for a css animation in general but this uses stroke-dasharray values and transitions. I don't think it's that simple.

[salatielsql]

I did with one CSS line:

.rc-progress-circle-path { transition: stroke-dashoffset 0.9s ease 0s, stroke-dasharray 0.9s ease 0s, stroke 0.9s ease 0s, stroke-width 0.1s ease 0.9s !important; }

[xrkffgg]

You can custom transition

progress/src/interface.ts

Line 15 in e4a262b

transition?: string;