Rotate animation for weird piechart

_screenshot.gif

App.tsx

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  StatusBar,
  Animated,
  Easing,
} from 'react-native';
import Svg, {Circle} from 'react-native-svg';

const App = () => {
  const viewBoxWidth = 42;
  const viewBoxHeight = 140;
  const viewBox = `0 0 ${viewBoxWidth} ${viewBoxHeight}`;
  const centerX = viewBoxWidth / 2;
  const centerY = viewBoxHeight / 2;
  const colorPrimary = '#dd0000';
  const spinValue = new Animated.Value(0);
  Animated.loop(
    Animated.timing(spinValue, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
      useNativeDriver: true,
    }),
  ).start();
  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <Animated.View
        style={{...styles.safeAreaView, transform: [{rotate: spin}]}}>
        <Svg viewBox={viewBox} style={{transform: [{rotateZ: '-90deg'}]}}>
          <Circle
            cx={centerX}
            cy={centerY}
            r={10}
            stroke={colorPrimary}
            fill={colorPrimary}
            strokeWidth={viewBoxWidth}
            strokeDasharray={3}
            strokeDashoffset={10}
          />
        </Svg>
      </Animated.View>
    </>
  );
};

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
});

export default App;