Skip to content

Instantly share code, notes, and snippets.

@pasmat

pasmat/js-css-circle-progress.html

Last active March 3, 2020 21:06
Show Gist options
  • Save pasmat/8310cab5c0a54692fbdc797511a9721e to your computer and use it in GitHub Desktop.
Save pasmat/8310cab5c0a54692fbdc797511a9721e to your computer and use it in GitHub Desktop.
Download ZIP
Circular progress using CSS and JS.
Raw
js-css-circle-progress.html
<html>
<body>
<style>
.root {
width: 50px;
height: 50px;
position: relative;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.clip {
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
border: 5px solid green;
border-radius: 50%;
position: absolute;
transform: rotate(0deg);
transform-origin: 50% 50%;
clip-path: inset(0 0 0 50%);
}
/*
.clip-left {
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
border: 5px solid green;
border-radius: 50%;
position: absolute;
transform: rotate(-180deg);
clip-path: inset(0 50% 0 0);
transform-origin: 50% 50%;
}*/
</style>
<div class="root">
<div class="wrapper">
<div class="clip right">
</div>
<div class="clip left">
</div>
</div>
</div>
<script>
var i = 0;
setInterval(function () {
setProgress(Math.abs(-1 + (i++ / 100) % 2));
}, 10);
function setProgress(progress) {
let rightProgress = -180 + Math.min(progress, 0.5) * 360;
let leftProgress = -180 + progress * 360;
document.getElementsByClassName("wrapper")[0].style.clipPath = progress <= 0.5 ? "inset(0 0 0 50%)" : "";
document.querySelector(".clip.right").style.transform = "rotate(" + rightProgress + "deg)";
document.querySelector(".clip.left").style.transform = "rotate(" + leftProgress + "deg)";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment