measure pathTransitionDuration in seconds, use in demo

demo/src/App.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import CircularProgressbar from 'react-circular-progressbar';
 import Demo from './Demo';
 
 // Stylesheets

demo/src/Demo.tsx

@@ -84,11 +84,10 @@ function Demo() {
             counterClockwise
             stylesForPercentage={(percentage: number) => {
               const alpha = (100 + percentage) / 200;
-              return {
-                path: {
-                  stroke: `rgba(62, 152, 199, ${alpha})`,
-                },
-              };
+              return buildStyles({
+                pathColor: `rgba(62, 152, 199, ${alpha})`,
+                pathTransitionDuration: 0.2,
+              });
             }}
           />
         </Example>

src/buildStyles.ts

@@ -10,12 +10,12 @@ export default function buildStyles({
   trailColor,
   backgroundColor,
 }: {
-  rotation?: number;
+  rotation?: number;  // Number of turns, 0-1
   strokeLinecap?: any;
   textColor?: string;
   textSize?: string | number;
   pathColor?: string;
-  pathTransitionDuration?: string;
+  pathTransitionDuration?: number;  // Measured in seconds
   trailColor?: string;
   backgroundColor?: string;
 }): CircularProgressbarStyles {
@@ -29,7 +29,7 @@ export default function buildStyles({
       strokeLinecap: strokeLinecap,
       transform: rotationTransform,
       transformOrigin: rotationTransformOrigin,
-      transitionDuration: pathTransitionDuration,
+      transitionDuration: `${pathTransitionDuration}s`,
     },
     trail: {
       stroke: trailColor,