Built with SASS and background stripped images
Created
December 17, 2015 15:15
-
-
Save datalink747/0e8aba660ecd469385d3 to your computer and use it in GitHub Desktop.
CSS3 Radial Progress Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
@title: CSS3 Background Radial Progress Bars | |
@author: @geedmo | |
@url: http://geedmo.com | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import compass | |
// Colors | |
$barColor: tomato | |
$overlayColor: #fffde8 | |
$backColor: #2f3439 | |
@import url(http://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
This isn't working for me. My inspector keeps saying that the linear-gradients are not a valid value.