Scribd
Upload
5 views2 pages

File 7

This document is an HTML template for a progress circle loader. It includes CSS for styling the loader and JavaScript to update the progress dynamically. The loader displays a circular progress bar that fills up to 100% over time.

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
5 views2 pages

File 7

This document is an HTML template for a progress circle loader. It includes CSS for styling the loader and JavaScript to update the progress dynamically. The loader displays a circular progress bar that fills up to 100% over time.

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
titleProgress Circle Loadertitle
link href=httpsfonts.googleapis.comcss2family=Poppinswght@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 150px;
height 150px;
}
.progress-circle {
width 150px;
height 150px;
border-radius 50%;
background conic-gradient(red 0deg, lightgray 0deg);
display flex;
justify-content center;
align-items center;
}
.progress-text {
position absolute;
font-size 24px;
font-weight bold;
color #333;
}
style
head
body
div class=progress-container
div class=progress-circle
div class=progress-text0%div
div
div

script
let progress = 0;
const progressText = document.querySelector(.progress-text);
const progressCircle = document.querySelector(.progress-circle);

function updateProgress() {
if (progress = 100) {
progressText.innerText = `${progress}%`;
progressCircle.style.background = `conic-gradient(red ${progress
3.6}deg, lightgray 0deg)`;
progress++;
setTimeout(updateProgress, 50);
}
}
updateProgress();
script
body
html

You might also like