Html :-

<div id="wifi-loader">
<svg class="circle-outer" viewBox="0 0 86 86">
<circle class="back" cx="43" cy="43" r="40"></circle>
<circle class="front" cx="43" cy="43" r="40"></circle>
<circle class="new" cx="43" cy="43" r="40"></circle>
</svg>
<svg class="circle-middle" viewBox="0 0 60 60">
<circle class="back" cx="30" cy="30" r="27"></circle>
<circle class="front" cx="30" cy="30" r="27"></circle>
</svg>
<svg class="circle-inner" viewBox="0 0 34 34">
<circle class="back" cx="17" cy="17" r="14"></circle>
<circle class="front" cx="17" cy="17" r="14"></circle>
</svg>
<div class="text" data-text="Searching"></div>
</div>

Css :-
#wifi-loader {
--background: #62abff;
--front-color: #4f29f0;
--back-color: #c3c8de;
--text-color: #414856;
width: 64px;
height: 64px;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

#wifi-loader svg {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}

#wifi-loader svg circle {
position: absolute;
fill: none;
stroke-width: 6px;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(-100deg);
transform-origin: center;
}

#wifi-loader svg circle.back {
stroke: var(--back-color);
}

#wifi-loader svg circle.front {
stroke: var(--front-color);
}

#wifi-loader svg.circle-outer {
height: 86px;
width: 86px;
}

#wifi-loader svg.circle-outer circle {
stroke-dasharray: 62.75 188.25;
}

#wifi-loader svg.circle-outer circle.back {
animation: circle-outer135 1.8s ease infinite 0.3s;
}

#wifi-loader svg.circle-outer circle.front {
animation: circle-outer135 1.8s ease infinite 0.15s;
}

#wifi-loader svg.circle-middle {
height: 60px;
width: 60px;
}

#wifi-loader svg.circle-middle circle {
stroke-dasharray: 42.5 127.5;
}

#wifi-loader svg.circle-middle circle.back {
animation: circle-middle6123 1.8s ease infinite 0.25s;
}

#wifi-loader svg.circle-middle circle.front {
animation: circle-middle6123 1.8s ease infinite 0.1s;
}

#wifi-loader svg.circle-inner {
height: 34px;
width: 34px;
}

#wifi-loader svg.circle-inner circle {
stroke-dasharray: 22 66;
}

#wifi-loader svg.circle-inner circle.back {
animation: circle-inner162 1.8s ease infinite 0.2s;
}

#wifi-loader svg.circle-inner circle.front {
animation: circle-inner162 1.8s ease infinite 0.05s;
}

#wifi-loader .text {
position: absolute;
bottom: -40px;
display: flex;
justify-content: center;
align-items: center;
text-transform: lowercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.2px;
}

#wifi-loader .text::before, #wifi-loader .text::after {
content: attr(data-text);
}

#wifi-loader .text::before {
color: var(--text-color);
}

#wifi-loader .text::after {
color: var(--front-color);
animation: text-animation76 3.6s ease infinite;
position: absolute;
left: 0;
}

@keyframes circle-outer135 {
0% {
stroke-dashoffset: 25;
}

25% {
stroke-dashoffset: 0;
}

65% {
stroke-dashoffset: 301;
}

80% {
stroke-dashoffset: 276;
}

100% {
stroke-dashoffset: 276;
}
}

@keyframes circle-middle6123 {
0% {
stroke-dashoffset: 17;
}

25% {
stroke-dashoffset: 0;
}

65% {
stroke-dashoffset: 204;
}

80% {
stroke-dashoffset: 187;
}

100% {
stroke-dashoffset: 187;
}
}

@keyframes circle-inner162 {
0% {
stroke-dashoffset: 9;
}

25% {
stroke-dashoffset: 0;
}

65% {
stroke-dashoffset: 106;
}

80% {
stroke-dashoffset: 97;
}

100% {
stroke-dashoffset: 97;
}
}

@keyframes text-animation76 {
0% {
clip-path: inset(0 100% 0 0);
}

50% {
clip-path: inset(0);
}

100% {
clip-path: inset(0 0 0 100%);
}
}

Html :-
<div class="spinner"></div>

Css :-
.spinner {
width: 56px;
height: 56px;
display: grid;
border: 4.5px solid #0000;
border-radius: 50%;
border-color: #dbdcef #0000;
animation: spinner-e04l1k 1s infinite linear;
}

.spinner::before,
.spinner::after {
content: "";
grid-area: 1/1;
margin: 2.2px;
border: inherit;
border-radius: 50%;
}

.spinner::before {
border-color: #474bff #0000;
animation: inherit;
animation-duration: 0.5s;
animation-direction: reverse;
}

.spinner::after {
margin: 8.9px;
}

@keyframes spinner-e04l1k {
100% {
transform: rotate(1turn);
}
}

Html :-
<div class="checkbox-wrapper-10">
<input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
<label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
</div>

Css :-

.checkbox-wrapper-10 .tgl {
display: none;
}

.checkbox-wrapper-10 .tgl,
.checkbox-wrapper-10 .tgl:after,
.checkbox-wrapper-10 .tgl:before,
.checkbox-wrapper-10 .tgl *,
.checkbox-wrapper-10 .tgl *:after,
.checkbox-wrapper-10 .tgl *:before,
.checkbox-wrapper-10 .tgl + .tgl-btn {
box-sizing: border-box;
}

.checkbox-wrapper-10 .tgl::-moz-selection,
.checkbox-wrapper-10 .tgl:after::-moz-selection,
.checkbox-wrapper-10 .tgl:before::-moz-selection,
.checkbox-wrapper-10 .tgl *::-moz-selection,
.checkbox-wrapper-10 .tgl *:after::-moz-selection,
.checkbox-wrapper-10 .tgl *:before::-moz-selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-10 .tgl::selection,
.checkbox-wrapper-10 .tgl:after::selection,
.checkbox-wrapper-10 .tgl:before::selection,
.checkbox-wrapper-10 .tgl *::selection,
.checkbox-wrapper-10 .tgl *:after::selection,
.checkbox-wrapper-10 .tgl *:before::selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::selection {
background: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after,
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:after {
left: 0;
}

.checkbox-wrapper-10 .tgl + .tgl-btn:before {
display: none;
}

.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
left: 50%;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
padding: 2px;
transition: all 0.2s ease;
font-family: sans-serif;
perspective: 100px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all 0.4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}

.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
transform: rotateY(-20deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
transform: rotateY(180deg);
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}

.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
transform: rotateY(20deg);
}

Html :-

<button>
Sign up
<div class="arrow-wrapper">
<div class="arrow"></div>

</div>
</button>

Css :-

button {
--primary-color: #645bff;
--secondary-color: #fff;
--hover-color: #111;
--arrow-width: 10px;
--arrow-stroke: 2px;
box-sizing: border-box;
border: 0;
border-radius: 20px;
color: var(--secondary-color);
padding: 1em 1.8em;
background: var(--primary-color);
display: flex;
transition: 0.2s background;
align-items: center;
gap: 0.6em;
font-weight: bold;
}

button .arrow-wrapper {
display: flex;
justify-content: center;
align-items: center;
}

button .arrow {
margin-top: 1px;
width: var(--arrow-width);
background: var(--primary-color);
height: var(--arrow-stroke);
position: relative;
transition: 0.2s;
}

button .arrow::before {
content: "";
box-sizing: border-box;
position: absolute;
border: solid var(--secondary-color);
border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
display: inline-block;
top: -3px;
right: 3px;
transition: 0.2s;
padding: 3px;
transform: rotate(-45deg);
}

button:hover {
background-color: var(--hover-color);
}

button:hover .arrow {
background: var(--secondary-color);
}

button:hover .arrow:before {
right: 0;
}

Html :-
<button class="btn">
<span>Hover Me</span>
<div class="container">
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
</svg>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
</svg>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
</svg>
</div>
</button>

Css :-

.btn {
position: relative;
display: flex;
overflow: hidden;
cursor: pointer;
width: 150px;
height: 50px;
background-color: #eeeeed;
border-radius: 80px;
border: none;
padding: 0 80px;
transition: all .2s ease;
justify-content: center;
align-items: center;
}

.btn:hover {
transform: scale(1.1);
}

.btn span {
position: absolute;
z-index: 99;
width: 150px;
height: 50px;
border-radius: 80px;
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
font-size: 17px;
text-align: center;
line-height: 50px;
letter-spacing: 2px;
color: #eeeeed;
background-color: #1f1f1f;
padding: 0 10px;
transition: all 1.2s ease;
}

.btn .container {
display: flex;
width: 150px;
border-radius: 80px;
line-height: 50px;
}

.btn svg {
padding: 0 5px;
opacity: 0;
}

.btn .container svg:nth-of-type(1) {
transition-delay: 0.65s;
}

.btn .container svg:nth-of-type(2) {
transition-delay: 0.8s;
}

.container svg:nth-of-type(3) {
transition-delay: 0.5s;
}

.btn:hover span {
opacity: 0;
}

.btn:hover svg {
opacity: 1;
}

Html :-

<div class="loader">
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
</div>

Css :-

.loader {
display: flex;
justify-content: center;
align-items: center;
--color: hsl(0, 0%, 87%);
--animation: 2s ease-in-out infinite;
}

.loader .circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
border: solid 2px var(--color);
border-radius: 50%;
margin: 0 10px;
background-color: transparent;
animation: circle-keys var(--animation);
}

.loader .circle .dot {
position: absolute;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--color);
animation: dot-keys var(--animation);
}

.loader .circle .outline {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: outline-keys var(--animation);
}

.circle:nth-child(2) {
animation-delay: 0.3s;
}

.circle:nth-child(3) {
animation-delay: 0.6s;
}

.circle:nth-child(4) {
animation-delay: 0.9s;
}

.circle:nth-child(5) {
animation-delay: 1.2s;
}

.circle:nth-child(2) .dot {
animation-delay: 0.3s;
}

.circle:nth-child(3) .dot {
animation-delay: 0.6s;
}

.circle:nth-child(4) .dot {
animation-delay: 0.9s;
}

.circle:nth-child(5) .dot {
animation-delay: 1.2s;
}

.circle:nth-child(1) .outline {
animation-delay: 0.9s;
}

.circle:nth-child(2) .outline {
animation-delay: 1.2s;
}

.circle:nth-child(3) .outline {
animation-delay: 1.5s;
}

.circle:nth-child(4) .outline {
animation-delay: 1.8s;
}

.circle:nth-child(5) .outline {
animation-delay: 2.1s;
}

@keyframes circle-keys {
0% {
transform: scale(1);
opacity: 1;
}

50% {
transform: scale(1.5);
opacity: 0.5;
}

100% {
transform: scale(1);
opacity: 1;
}
}

@keyframes dot-keys {
0% {
transform: scale(1);
}

50% {
transform: scale(0);
}

100% {
transform: scale(1);
}
}

@keyframes outline-keys {
0% {
transform: scale(0);
outline: solid 20px var(--color);
outline-offset: 0;
opacity: 1;
}

100% {
transform: scale(1);
outline: solid 0 transparent;
outline-offset: 20px;
opacity: 0;
}
}

Html :-

<div class="loader">
<svg height="0" width="0" viewBox="0 0 64 64" class="absolute">
<defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg">
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
<stop class="s-xJBuHA073rTt" stop-color="#973BED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#007CFF" offset="1"></stop>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
<stop class="s-xJBuHA073rTt" stop-color="#FFC800"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#F0F" offset="1"></stop>
<animateTransform repeatCount="indefinite" keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1" keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1" dur="8s" values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
<stop class="s-xJBuHA073rTt" stop-color="#00E0ED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#00DA72" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 54.722656,3.9726563 A 2.0002,2.0002 0 0 0 54.941406,4 h 5.007813 C 58.955121,17.046124 49.099667,27.677057 36.121094,29.580078 a 2.0002,2.0002 0 0 0 -1.708985,1.978516 V 60 H 29.587891 V 31.558594 A 2.0002,2.0002 0 0 0 27.878906,29.580078 C 14.900333,27.677057 5.0448787,17.046124 4.0507812,4 H 9.28125 c 1.231666,11.63657 10.984383,20.554048 22.6875,20.734375 a 2.0002,2.0002 0 0 0 0.02344,0 c 11.806958,0.04283 21.70649,-9.003371 22.730469,-20.7617187 z" class="dash" id="y" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="10" stroke="url(#c)" d="M 32 32
m 0 -27
a 27 27 0 1 1 0 54
a 27 27 0 1 1 0 -54" class="spin" id="o" pathLength="360"></path>
</svg>
<div class="w-2"></div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 h 4.6230469 v 25.919922 c -0.00276,11.916203 9.8364941,21.550422 21.7500001,21.296875 11.616666,-0.240651 21.014356,-9.63894 21.253906,-21.25586 a 2.0002,2.0002 0 0 0 0,-0.04102 V 4 H 56.25 v 25.919922 c 0,14.33873 -11.581192,25.919922 -25.919922,25.919922 a 2.0002,2.0002 0 0 0 -0.0293,0 C 15.812309,56.052941 3.998433,44.409961 4,29.919922 Z" class="dash" id="u" pathLength="360"></path>
</svg>
</div>