Skip to content

Instantly share code, notes, and snippets.

@cyberplanner
Created September 27, 2017 10:16
Show Gist options
  • Save cyberplanner/312e9cf75a2b46c4ca6fdc2eef27a844 to your computer and use it in GitHub Desktop.
Save cyberplanner/312e9cf75a2b46c4ca6fdc2eef27a844 to your computer and use it in GitHub Desktop.
CSS3 Radial Progress Bar
<div class="wrap">
<div class="progress-radial progress-25">
<div class="overlay">25%</div>
</div>
<div class="progress-radial progress-50">
<div class="overlay">50%</div>
</div>
<div class="progress-radial progress-75">
<div class="overlay">75%</div>
</div>
<div class="progress-radial progress-90">
<div class="overlay">90%</div>
</div>
</div>
/*
@title: CSS3 Background Radial Progress Bars
@author: @geedmo
@url: http://geedmo.com
*/
@import compass
// Colors
$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439
@import url(https://fonts.googleapis.com/css?family=Noto+Sans)
body
padding: 30px 0
background-color: $backColor
font-family: 'Noto Sans', sans-serif
.wrap
width: 600px
margin: 0 auto
/* -------------------------------------
* Bar container
* ------------------------------------- */
.progress-radial
float: left
margin-right: 30px
position: relative
width: 100px
height: 100px
border-radius: 50%
border: 2px solid $backColor // remove gradient color
background-color: $barColor // default 100%
/* -------------------------------------
* Optional centered circle w/text
* ------------------------------------- */
.progress-radial .overlay
position: absolute
width: 60px
height: 60px
background-color: $overlayColor
border-radius: 50%
margin-left: 20px
margin-top: 20px
text-align: center
line-height: 60px
font-size: 16px
/* -------------------------------------
* Mixin for progress-% class
* ------------------------------------- */
$step: 5 // step of % for created classes
$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
@for $i from 0 through $loops
.progress-#{$i*$step}
@if $i < $half
$nextdeg: 90deg + ( $increment * $i )
background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
@else
$nextdeg: -90deg + ( $increment * ( $i - $half ) )
background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment