Scribd
Upload
4 views2 pages

File 8

This document is an HTML code for a progress circle loader. It includes CSS for styling the loader and JavaScript to animate the progress from 0% to 100%. The loader is centered on the page and uses a circular design with a fill that rotates based on the progress value.

Uploaded by

bolap14336
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views2 pages

File 8

This document is an HTML code for a progress circle loader. It includes CSS for styling the loader and JavaScript to animate the progress from 0% to 100%. The loader is centered on the page and uses a circular design with a fill that rotates based on the progress value.

Uploaded by

bolap14336
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Circle Loader</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Poppins', sans-serif;
}
.progress-container {
position: relative;
width: 160px;
height: 160px;
}
.progress-ring {
width: 160px;
height: 160px;
border-radius: 50%;
border: 8px solid lightgray;
position: absolute;
}
.progress-fill {
width: 160px;
height: 160px;
border-radius: 50%;
border: 8px solid red;
clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
transform: rotate(0deg);
position: absolute;
}
.progress-text {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-ring"></div>
<div class="progress-fill" id="progressFill"></div>
<div class="progress-text" id="progressText">0%</div>
</div>

<script>
let progress = 0;
const progressText = document.getElementById("progressText");
const progressFill = document.getElementById("progressFill");

function updateProgress() {
if (progress <= 100) {
progressText.innerText = `${progress}%`;
progressFill.style.transform = `rotate(${progress * 3.6}deg)`;
progress++;
setTimeout(updateProgress, 50);
}
}
updateProgress();
</script>
</body>
</html>

You might also like