Created
September 21, 2014 16:21
-
-
Save Igosuki/44daadea4b54c135d426 to your computer and use it in GitHub Desktop.
Static Radial Progress
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
// 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