CSS Spinner animation effect
CSS Spinner animation
The spinner animation for an arbitraty HTML element can be achieved using math's sinus and cosine to calculate the correct transform#translate position for each step rotating clockwise on a imaginary circle.
<style>
.spinner {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: spinner;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spinner {
/* Calculated steps using sin, cos functions. */
0% { transform: translate(0, -50%) }
6.25% { transform: translate(19%, -46%) }
12.5% { transform: translate(35.35%, -35.35%) ; }
18.25% { transform: translate(46%, -19%) }
25% { transform: translate(50%, 0) ; }
31.25% { transform: translate(46%, 19%) }
37.5% { transform: translate(35.35%, 35.35) ; }
43.75% { transform: translate(19%, 46%) }
50% { transform: translate(0, 50%) ; }
56.25% { transform: translate(-19%, 46%) }
62.5% { transform: translate(-35.35, 35.35%) ; }
68.75% { transform: translate(-46%, 19%) }
75% { transform: translate(-50%, 0) ; }
81.25% { transform: translate(-46%, -19%) }
87.5% { transform: translate(-35.35%, -35.35%) ; }
93.75% { transform: translate(-19%, -46%) }
100% { transform: translate(0, -50%) ; }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence