Html :-
<div class="loader">
<div class="square" id="sq1"></div>
<div class="square" id="sq2"></div>
<div class="square" id="sq3"></div>
<div class="square" id="sq4"></div>
<div class="square" id="sq5"></div>
<div class="square" id="sq6"></div>
<div class="square" id="sq7"></div>
<div class="square" id="sq8"></div>
<div class="square" id="sq9"></div>
</div>

Css :-

@keyframes loader_5191 {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

.square {
background: #ddd;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
}

#sq1 {
margin-top: -25px;
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 0s infinite alternate;
}

#sq2 {
margin-top: -25px;
animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
}

#sq3 {
margin-top: -25px;
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 150ms infinite;
}

#sq4 {
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 225ms infinite;
}

#sq5 {
animation: loader_5191 675ms ease-in-out 300ms infinite;
}

#sq6 {
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 375ms infinite;
}

#sq7 {
margin-top: 15px;
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 450ms infinite;
}

#sq8 {
margin-top: 15px;
animation: loader_5191 675ms ease-in-out 525ms infinite;
}

#sq9 {
margin-top: 15px;
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 600ms infinite;
}

Html :-

<div class="container">
<input class="label-check" id="label-check" type="checkbox">
<label for="label-check" class="hamburger-label">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<label></label></label></div>

Css :-

.label-check {
display: none;
}

.hamburger-label {
width: 70px;
height: 58px;
display: block;
cursor: pointer;
}

.hamburger-label div {
width: 70px;
height: 6px;
background-color: #fff;
position: absolute;
}

.line1 {
transition: all .3s;
}

.line2 {
margin: 18px 0 0 0;
transition: 0.3s;
}

.line3 {
margin: 36px 0 0 0;
transition: 0.3s;
}

#label-check:checked + .hamburger-label .line1 {
transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px);
border-radius: 50px 50px 50px 0;
}

#label-check:checked + .hamburger-label .line3 {
transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px);
border-radius: 0 50px 50px 50px;
}

#label-check:checked + .hamburger-label .line2 {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
width: 45px;
}

Html :-

<div class="col-md-6 reject-checkbox">
<div class="mb-2 text-center">
<div class="checkbox-wrapper">
<input
name="ehs_approval"
class="form-check-label custom-radio-label"
id="Rejected"
type="checkbox"
/>
<label for="Rejected">
<div class="tick_mark">
<div class="cross"></div>
</div>
</label>
</div>
</div>
</div>

Css :-

.reject-checkbox .checkbox-wrapper * {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"] {
display: none;
}
.reject-checkbox .checkbox-wrapper label {
--size: 50px;
--shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);
position: relative;
display: block;
width: var(--size);
height: var(--size);
margin: 0 auto;
background-color: #4158d0;
background-image: linear-gradient(
43deg,
#4158d0 0%,
#c850c0 46%,
#ffcc70 100%
);
border-radius: 50%;
box-shadow: 0 var(--shadow) #ffbeb8;
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
overflow: hidden;
z-index: 1;
}
.reject-checkbox .checkbox-wrapper label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: calc(var(--size) * 0.7);
height: calc(var(--size) * 0.7);
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: inset 0 var(--shadow) #ffbeb8;
transition: 0.2s ease width, 0.2s ease height;
}
.reject-checkbox .checkbox-wrapper label:hover:before {
width: calc(var(--size) * 0.55);
height: calc(var(--size) * 0.55);
box-shadow: inset 0 var(--shadow) #ff9d96;
}
.reject-checkbox .checkbox-wrapper label:active {
transform: scale(0.9);
}
.reject-checkbox .checkbox-wrapper .tick_mark {
position: absolute;
top: 9px;
left: 2px;
right: 0;
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
margin: 0 auto;
margin-left: calc(var(--size) * 0.14);
transform: rotateZ(-92deg);
}
.reject-checkbox .checkbox-wrapper .tick_mark:before,
.reject-checkbox .checkbox-wrapper .tick_mark:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition: 0.2s ease transform, 0.2s ease opacity;
}
.reject-checkbox .checkbox-wrapper .tick_mark:before {
left: 0;
bottom: 0;
width: calc(var(--size) * 0.1);
height: calc(var(--size) * 0.3);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
transform: translateY(calc(var(--size) * -0.68));
}
.reject-checkbox .checkbox-wrapper .tick_mark:after {
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--size) * 0.1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
transform: translateX(calc(var(--size) * 0.78));
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"]:checked + label {
background-color: #4158d0;
background-image: linear-gradient(
43deg,
#f7805c 0%,
#fb4545 46%,
#e1236a 100%
);
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label:before {
width: 0;
height: 0;
}

.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:before,
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:after {
background-color: #fff;
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.1);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:after {
transform: translate(-50%, -50%) rotate(-45deg);
}