How to change border size dynamically of a circle using css and JS?









up vote
1
down vote

favorite












I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function yesno()
navigator.vibrate(500);
for (var i = 0; i < 40; i++)
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";

if (Math.random() < 0.5)
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";

else
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";



</script>
<style type="text/css">


#yesno
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);


#ynbtn
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;


</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>









share|improve this question























  • I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
    – Robin Zigmond
    Nov 10 at 18:19










  • What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
    – Brisingle
    Nov 10 at 18:41











  • So the probleme is that the code execute all for loop at a time and not one by one i would like.
    – Brisingle
    Nov 10 at 18:49














up vote
1
down vote

favorite












I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function yesno()
navigator.vibrate(500);
for (var i = 0; i < 40; i++)
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";

if (Math.random() < 0.5)
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";

else
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";



</script>
<style type="text/css">


#yesno
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);


#ynbtn
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;


</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>









share|improve this question























  • I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
    – Robin Zigmond
    Nov 10 at 18:19










  • What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
    – Brisingle
    Nov 10 at 18:41











  • So the probleme is that the code execute all for loop at a time and not one by one i would like.
    – Brisingle
    Nov 10 at 18:49












up vote
1
down vote

favorite









up vote
1
down vote

favorite











I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function yesno()
navigator.vibrate(500);
for (var i = 0; i < 40; i++)
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";

if (Math.random() < 0.5)
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";

else
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";



</script>
<style type="text/css">


#yesno
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);


#ynbtn
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;


</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>









share|improve this question















I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function yesno()
navigator.vibrate(500);
for (var i = 0; i < 40; i++)
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";

if (Math.random() < 0.5)
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";

else
for (var i = 0; i < 40; i++)
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";



</script>
<style type="text/css">


#yesno
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);


#ynbtn
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;


</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>






javascript html css dom






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 19:43









Emil Stenström

6,84553761




6,84553761










asked Nov 10 at 18:10









Brisingle

61




61











  • I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
    – Robin Zigmond
    Nov 10 at 18:19










  • What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
    – Brisingle
    Nov 10 at 18:41











  • So the probleme is that the code execute all for loop at a time and not one by one i would like.
    – Brisingle
    Nov 10 at 18:49
















  • I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
    – Robin Zigmond
    Nov 10 at 18:19










  • What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
    – Brisingle
    Nov 10 at 18:41











  • So the probleme is that the code execute all for loop at a time and not one by one i would like.
    – Brisingle
    Nov 10 at 18:49















I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
– Robin Zigmond
Nov 10 at 18:19




I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant for loop - which is 40px wide, of whichever colour was randomly decided.
– Robin Zigmond
Nov 10 at 18:19












What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41





What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41













So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49




So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49












1 Answer
1






active

oldest

votes

















up vote
0
down vote













Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.






var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>








share|improve this answer




















  • I tried your code but it didn't work...
    – Brisingle
    Nov 10 at 18:59










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241960%2fhow-to-change-border-size-dynamically-of-a-circle-using-css-and-js%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.






var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>








share|improve this answer




















  • I tried your code but it didn't work...
    – Brisingle
    Nov 10 at 18:59














up vote
0
down vote













Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.






var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>








share|improve this answer




















  • I tried your code but it didn't work...
    – Brisingle
    Nov 10 at 18:59












up vote
0
down vote










up vote
0
down vote









Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.






var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>








share|improve this answer












Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.






var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>








var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>





var circle = document.querySelector('.circle');

function decreaseBorder()
circle.classList.add('thin');
setTimeout(function()
circle.classList.remove('thin');
circle.classList.add('bold');
, 1000);


window.onload = function() decreaseBorder();

.circle 
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);


.thin
border-width: 0;


.bold
border-width: 40px;
border-color: rgba(0,0,0,1);

<div class="circle"></div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 10 at 18:38









Pablo Darde

1,37311527




1,37311527











  • I tried your code but it didn't work...
    – Brisingle
    Nov 10 at 18:59
















  • I tried your code but it didn't work...
    – Brisingle
    Nov 10 at 18:59















I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59




I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59

















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241960%2fhow-to-change-border-size-dynamically-of-a-circle-using-css-and-js%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Ruanda

Darth Vader #20