HTML

CSS

JS

.animated-checkbox-wrapper input[type="checkbox"] {
     display: none;
}

.animated-checkbox-wrapper .terms-label {
     cursor: pointer;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

.animated-checkbox-wrapper .terms-label .label-text {
     margin-left: 10px;
}

.animated-checkbox-wrapper .checkbox-svg {
     width: 30px;
     height: 30px;
}

.animated-checkbox-wrapper .checkbox-box {
     fill: RGB(179, 178, 178);
     stroke: #8c00ff;
     stroke-dasharray: 800;
     stroke-dashoffset: 800;
     -webkit-transition: stroke-dashoffset 0.6s ease-in;
     transition: stroke-dashoffset 0.6s ease-in;
}

.animated-checkbox-wrapper .checkbox-tick {
     stroke: #8c00ff;
     stroke-dasharray: 172;
     stroke-dashoffset: 172;
     -webkit-transition: stroke-dashoffset 0.6s ease-in;
     transition: stroke-dashoffset 0.6s ease-in;
}

.animated-checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-box, .animated-checkbox-wrapper input[type="checkbox"]:checked + .terms-label .checkbox-tick {
     stroke-dashoffset: 0;
}

Checkbox with Animated SVG

Enhance your web or mobile application with this modern checkbox design featuring a sleek and seamless animated border and checkmark when toggled on.

You can change the color of the checkbox border animation by changing the fill property on CSS line 25.