I have this animation which works perfect fine on browsers like Chrome, but the moment I try it on Safari it looks broken and doesn’t do what it is supposed to do.

Here is the code:

            .progressIndicator {
                stroke: var(--primary_color);
            }

            .progressIndicator svg {
                animation: crotate 1.5s linear infinite;
                -webkit-animation: crotate 1.5s linear infinite;
                height: 100%;
                width: 100%;
            }

            .progressIndicator circle {
                stroke-dasharray: 1,200;
                stroke-dashoffset: 0;
                animation: cdash 1.5s ease-in-out infinite 0s;
                -webkit-animation: cdash 1.5s ease-in-out infinite 0s;
                stroke-linecap: round;
                fill: none;
                stroke-width:7.5px;
            }

            @keyframes crotate {
                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes crotate {
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
            
            @keyframes cdash {
                0% {
                    stroke-dasharray: 1,200;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -124;
                }
            }

            @-webkit-keyframes cdash {
                0% {
                    stroke-dasharray: 1,200;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 89,200;
                    stroke-dashoffset: -124;
                }
            }

If you have any additional questions, please let me know. I did everything in my knowledge to make this animation as Webkit compatible as possible, but I had no success so far.