Skip to content

Instantly share code, notes, and snippets.

@superstes

superstes/circular-progress-css.js

Last active April 3, 2024 15:50
Show Gist options
  • Save superstes/cc410ee635ed88841572da33b76648c9 to your computer and use it in GitHub Desktop.
Save superstes/cc410ee635ed88841572da33b76648c9 to your computer and use it in GitHub Desktop.
Download ZIP
Minimalistic Circular Progress using CSS & vanilla JS
Raw
circular-progress-css.js
// NOTE: this can be used to create a minimalistic version of these:
// https://github.com/tigrr/circle-progress
/* HTML
<!DOCTYPE html>
<html>
<head>
<title>Circular Progress</title>
<link rel="stylesheet" type="text/css" href="prog.css">
</head>
<body>
<div id="my-progress"><p>Test</p></div>
<script type="text/javascript" src="prog.js"></script>
</body>
</html>
*/
/* CSS
#my-progress {
width: 100px;
height: 100px;
border-style: solid;
border-radius: 100%;
border-width: 2px;
border-color: #121212;
background: transparent;
}
#my-progress > p {
text-align: center;
padding-top: 40%;
margin-top: 0%;
}
*/
const ELEMENT_PROGRESS = 'my-progress';
const COLOR_PASSED = 'orange';
const COLOR_LEFT = 'lightgrey';
const TEST_PERIOD = 60 * 1000;
function updateProgressElement(percentage) {
document.getElementById(ELEMENT_PROGRESS).style.background="conic-gradient(" + COLOR_PASSED + " 0, " + COLOR_PASSED + " " + percentage + "%, " + COLOR_LEFT + " 0)";
}
function updateProgress() {
let testPercentage = ((Math.ceil(Date.now() % TEST_PERIOD)) / TEST_PERIOD) * 100;
updateProgressElement(testPercentage);
}
updateProgress()
setInterval("updateProgress()", 1000)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment