Animated rotate circle SVG in reactjs

Viewed 29

https://i.stack.imgur.com/kG5Sg.png

How can i dot blue running around circle. I have tried using transform:rotate in css but no success. Here is my code.

import './loadingicon.css'
const LoadingIcon = () => {
    return (
        < >
            <div className='circle'>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
                        <circle
                        class='track'
                        cx="80"
                        cy="80"
                        r="70"
                        fill="none"
                        stroke="#374a67"
                        stroke-dasharray="26.416, 5" 
                        stroke-width="4"
                        />
                        <circle class="filled" cx="80" cy="80" r="70" />
                    </svg>
        </div>
      </>
    )
}

export default LoadingIcon;

loadingicon.css

.track,
.filled {
  stroke-width: 10;
  fill: none;
}

.track {
  stroke: #eee;
}

.filled {
  stroke: blue;
  stroke-dashoffset: 420;
  stroke-dasharray: 440;
}

0 Answers
Related