Skip to content

Instantly share code, notes, and snippets.

@khazeamo

khazeamo/CircularProgress

Last active August 15, 2018 12:15
Show Gist options
  • Save khazeamo/ca930c97d5d3a9189219e4b8e66e8085 to your computer and use it in GitHub Desktop.
Save khazeamo/ca930c97d5d3a9189219e4b8e66e8085 to your computer and use it in GitHub Desktop.
Download ZIP
Circular Progress (SVG & CSS)
Raw
CircularProgress
https://codepen.io/xgad/post/svg-radial-progress-meters
Raw
circularprogress.css
.circular-progress {
transform: rotate(-90deg)
}
Raw
circularprogress.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="circularprogress.css">
<title>Document</title>
</head>
<body>
<svg class="circular-progress" width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
<circle cx="60" cy="60" r="54" fill="none" stroke="deepskyblue" stroke-width="12"
stroke-dasharray="339.292" stroke-dashoffset="135.717" />
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment