PURE CSS LOADER

Shashankk
1 min readNov 30, 2019

--

loader

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);}

to

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

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

}

loader upside down

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Shashankk
Shashankk

Written by Shashankk

0 Followers

Engineering student who loves coding

No responses yet

Write a response