hello ,guys here i have shown a pure css styled loader its very simple animation trick every one can use

i have created a nav and turn it to the circle by making border-radius =50%

and then using animation keywords from and to and just rotating it from 0 degrees to 359 deg with delay of 50 milisec

and to make it different i also changed border every time as it rotates its border will keep changing

nav{ height:300px; width:300px; border-radius:50%; transition:50s; margin-top: 30px; animation: animi2 3s infinite; border-top:10px solid red;}

@keyframes animi2{ from{transform: rotate(0deg);}


{transform: rotate(359deg); border-top:25px solid pink;}

to{transform: rotate(359deg); border-top:25px solid white;}


loader upside down




Engineering student who loves coding

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Engineering student who loves coding

More from Medium

CSS (Cascading Style Sheets)

Vuetify use CSS Grid classes

CSS selectors with details example

Use custom fonts with CSS

Our web page with the Engin typeface