/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side,#40c2cb 90%,#0000);
  background:
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

/* HTML: <div class="cancellation-loader"></div> */
.cancellation-loader {
	width: 40px;
	height: 12px;
	border-radius: 20px;
	color: rgb(220, 53, 69);
	border: 2px solid;
	position: relative;
	display: none;
}
.cancellation-loader::before {
	content: "";
	position: absolute;
	margin: 2px;
	inset: 0 100% 0 0;
	border-radius: inherit;
	background: currentColor;
	animation: l6 1s forwards;
}
@keyframes l6 {
    100% {inset:0}
}