circle css animation
circle css animation
xxxxxxxxxxclass ProgressRing extends React.Component { constructor(props) { super(props); const { radius, stroke } = this.props; this.normalizedRadius = radius - stroke * 2; this.circumference = this.normalizedRadius * 2 * Math.PI; }}Source: css-tricks.com
Closely Related Answers
xxxxxxxxxx.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; animation: scale 2s infinite ease-in-out;}@keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }}Source: Grepper
xxxxxxxxxx<style> @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .load { width: 100px; height: 100px; margin: 110px auto 0; border: solid 10px #8822aa; border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; -webkit-transition: all 0.5s ease-in; -webkit-animation-name: rotate; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; transition: all 0.5s ease-in; animation-name: rotate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }</style><div data-loading="" class="load d-none"></div>Source: Grepper
Twitter 
LinkedIn