.loader-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	z-index: 9999;
	top: 0;
	left: 0;
	background: white;
}

.loader {
	transform: rotate(-90deg); 
	width: 100px;
	height: 100px;
}

.loader.sm {
	transform: rotate(-90deg); 
	width: 50px;
	height: 50px;
}

.loader.md {
	transform: rotate(-90deg); 
	width: 100px;
	height: 100px;
}

.loader.lg {
	transform: rotate(-90deg); 
	width: 200px;
	height: 200px;
}

.circle-background {
	fill: none;
	stroke: var(--primary); 
	stroke-width: 8;
}

.circle-progress {
	fill: none;
	stroke: #3498db; 
	stroke-width: 8;
	stroke-dasharray: 339.292; 
	stroke-dashoffset: 339.292; 
	transition: stroke-dashoffset 3s ease; 
}

.loader-text {
	margin-top: 10px;
	font-size: 16px;
	color: #3498db;
}

@keyframes loading {
	0% {
		stroke-dashoffset: 339.292; 
	}
	100% {
		stroke-dashoffset: 0; 
	}
}

.circle-progress[data-animation="5"] {
	animation: loading 5s infinite; 
}

.circle-progress[data-animation="10"] {
	animation: loading 10s infinite; 
}

.circle-progress[data-animation="15"] {
	animation: loading 15s infinite; 
}

.circle-progress[data-animation="20"] {
	animation: loading 20s infinite; 
}

.circle-progress[data-animation="25"] {
	animation: loading 25s infinite; 
}

.circle-progress[data-animation="30"] {
	animation: loading 30s infinite; 
}