Draw border around a circle with animation

Question

I want a 2px border to draw around a circle slowly when i hover on the circle. Something like this https://jsfiddle.net/cf6fqmbx/

I tried the same method, but I'm having content under the circle, so the box shadow is overlapping the content when i hover on it. Anyway to achieve this(CSS3 or jQuery)?

My current fiddle https://jsfiddle.net/Lkch05ok/3/

<div class="banner-image"></div>

<div class="circle_holder">
  <div class="circle"></div>
  Lorem Ipsum Dolor
</div>

Probably this answer can help http://stackoverflow.com/a/28866340/1926369 — vals, Jan 11 '16 at 10:52
You would find this one also helpful. It is a circular progress bar (count down timer) which slowly draws a circular border - http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281#31199281 — Harry, Jan 11 '16 at 13:19

Jinu Kurian · Accepted Answer · 2016-01-11T09:58:45.017

Hope this is what you want.

To make the border animation slow, just increase the time delay. Like I've done here.

.circle:hover {
  animation: border 2s ease 1 forwards;
}

updated code

EDITED

html {
  height: 100%;
}
body {
  height: 100%;
  background: #ddd;
}
.header{
  width:100%;
  height:100px;
  background:cyan;
  z-index: 9999;
}
.circle_holder {
  width: 150px;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
}
.circle {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: red;
  box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px #dddddd;
}
.circle:hover {
  animation: border 2s ease 1 forwards;
  cursor: pointer;
}
@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  25% {
    box-shadow: 0 -125px 0 2px #dddddd, -60px -60px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  50% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, -60px 60px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  75% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 60px 60px 0 2px #dddddd, 0 0 0 2px black;
  }
  100% {
    box-shadow: 0 -125px 0 2px #dddddd, -125px 0px 0 2px #dddddd, 0px 125px 0 2px #dddddd, 120px 40px 0 2px #dddddd, 0 0 0 2px black;
  }
}
span {
  position: absolute;
  bottom: -50px;
  color: #333;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}

<div class="header">

</div>
<div class="circle_holder" style="z-index: 1;">
  <div class="circle">
  <span>Lorem Ipsum Dolor </span>
 </div>
</div>

The border should slowly draw around the circle. This is not what i want. — majorhavoc, Jan 11 '16 at 08:39
@SharathDaniel Updated the code with explanation. Hope that helps. — Jinu Kurian, Jan 11 '16 at 08:52
I have an issue with that code, i have a div above that with an image, the circles are showing there. Please check the updated fiddle. https://jsfiddle.net/Lkch05ok/1/ — majorhavoc, Jan 11 '16 at 09:52
@SharathDaniel : give overflow: hidden to .circle_holder class. fiddle here : https://jsfiddle.net/e58euhfa/2/ Snippet is now updated. Please check. — Jinu Kurian, Jan 11 '16 at 09:57

Draw border around a circle with animation

1 Answers1