Animating circular image border

I have created a code pen here:

I was trying to achieve that border should be delayed and it should have circular animation. It should start and then complete the circle(border).

I also found some code pens, but they are using SCSS and Pseudo element property. Is there any simple and easy way around by just using css animation?


Unfortunately its quite complicated to animate a border around a circle.

Here’s a revised codepen of an old demo of mine that shows one solution.

Most of it is smoke and mirrors :slight_smile:

It’s quite hard to understand but the basics are that 2 circles are clipped in half and then each circle is half rotated around the circle. One half circle hides the other one until a half animation is complete and then the other half is animated to complete the circle.

There is no border as such but a solid background which is hidden by the inner elements to just allow the edge of the circles to be seen.

4 Likes

Here is one way of doing it:

The SVG path is a dashed line with the length of dashes and gaps equal to the circumference. Animating the dash offset causes the circle to appear over a period of 5 seconds. There’s also a delay of 5 seconds before the animation starts.

4 Likes

I was going to suggest SVG as that looks much neater :slight_smile:

2 Likes