Circular Checkbox developed with HTML , CSS , JavaScript
Copy the below HTML code
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="checkyborder ischecked">
<input class="checky" type="checkbox" checked>
</div>
</body>
</html>
Copy the below CSS code
CSS
body {
background-color: #111;
display: grid;
place-items: center;
height: 100vh;
overflow: hidden;
}
.checkyborder {
width: 100px;
height: 100px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.ischecked {
background: conic-gradient(from var(--angle), #00bfff 1%, #800080 40%, #ff69b4 65%, #0000ff 80%, #00bfff 85%);
}
.checky {
width: 80px;
height: 80px;
appearance: none;
border-radius: 100%;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
display: flex;
background: #111;
justify-content: center;
align-items: center;
z-index: 10;
}
.checky:checked:after {
content: '\2714';
width: 100%;
height: 100%;
border-radius: 8px;
position: absolute;
color: skyblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 52px;
}
Copy the below JavaScript code
JAVASCRIPT
let chk = document.querySelector('.checky');
let bdr = document.querySelector('.checkyborder');
function startAnimation() {
let angle = 0;
function animate() {
angle = (angle + 1) % 360;
bdr.style.setProperty('--angle', `${angle}deg`);
requestAnimationFrame(animate);
}
animate();
}
window.addEventListener('load', function () {
if (chk.checked) {
startAnimation();
}
});
chk.addEventListener('click', function () {
bdr.classList.toggle('ischecked');
if (chk.checked) {
startAnimation();
} else {
bdr.classList.remove('ischecked');
}
});
