CODEWITHSUNDEEP
css
handsome
handsome

Reputation: 2402

CSS color animate border-top property

I have a 4px border top with a blue color and I want to create a simple animation to indicate that something is loading.

body.loading {
    border-top: 3px black solid;
}

I want to have a black/white gradient and move it to make the effect. I found some examples for mouse over effects but in this case I want the animation to last forever only for the body.loading class.

I found an example but is using a background color not a border. (http://jsfiddle.net/aKhjk/1/). thank you for your guidance.

Upvotes: 1

Views: 462

Answers (1)

Balaji731
Balaji731

Reputation: 1129

Add a animation property for bordertestclass

 animation: loading 3s linear infinite;

keyframe for the animation below:

@keyframes loading {
from {left: 0%; width: 0;z-index:100;}
to {left: 0; width: 100%;}

}

demo

Upvotes: 2

Related Questions