CODEWITHSUNDEEP
javascripthtmlcss
Luis Fernandez
Luis Fernandez

Reputation: 559

How to make half the border of a circle transparent

I have a minigame that the user has 60 seconds to solve. To indicate the remaining time, I use a number that will start at 60 and start going down 1 per second until reaching 0. This number will be inside a transparent circular div with a border:

.circle {
  width: 100px;
  height: 100px;
  border: 3px solid #2F4491;
  border-radius: 100%;
}

I'm trying to make the border dissapear proportionally to the remaining time: The border will be fully visible at the beginning (60s remaining), only the left side visible when the user only has 30s remaining, and so on.

Any idea on how to achieve this?

Upvotes: 0

Views: 77

Answers (2)

Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Try this. 

var time = 60;
var initialOffset = '440';
var i = 1

/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

var interval = setInterval(function() {
		$('h2').text(i);
		if (i == time) {  	
      clearInterval(interval);
			return;
    }
    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
    i++;  
}, 1000);
.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item html">
    <h2>0</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#78cef1" fill="none"/>
     </g>
    </svg>
</div>

Upvotes: 1

Zander
Zander

Reputation: 1086

Set border-right-color and border-bottom-color to transparent when the time is below 30s. Also, you will have to rotate the object -45deg, so you will have it half-right and half-left.

When fade out, do the same with bottom and top.

Upvotes: 0

Related Questions