Pie timer with CSS Jquery using linear-gradient.
Forked from elaelation's Pen CSS Jquery Pie Countdown Timer.
Created
July 13, 2014 18:08
-
-
Save Acts7/4b6f4d3c6306a2832d86 to your computer and use it in GitHub Desktop.
A Pen by Acts7.
This file contains hidden or 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="pie degree"> | |
| <span class="block"></span> | |
| <span id="time">0</span> | |
| </div> |
This file contains hidden or 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
| /* | |
| to modify total time, just input on variable totaltime | |
| */ | |
| var totaltime = 60; | |
| function update(percent){ | |
| var deg; | |
| if(percent<(totaltime/2)){ | |
| deg = 90 + (360*percent/totaltime); | |
| $('.pie').css('background-image', | |
| 'linear-gradient('+deg+'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)' | |
| ); | |
| } else if(percent>=(totaltime/2)){ | |
| deg = -90 + (360*percent/totaltime); | |
| $('.pie').css('background-image', | |
| 'linear-gradient('+deg+'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)' | |
| ); | |
| } | |
| } | |
| var count = parseInt($('#time').text()); | |
| myCounter = setInterval(function () { | |
| count+=1; | |
| $('#time').html(count); | |
| update(count); | |
| if(count==totaltime) clearInterval(myCounter); | |
| }, 1000); |
This file contains hidden or 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 url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); | |
| $tosca:#1fbba6; | |
| body{ | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight:300; | |
| background:lighten($tosca,40%); | |
| } | |
| .pie{ | |
| width: 250px; | |
| height: 250px; | |
| display: block; | |
| position: relative; | |
| border-radius: 50%; | |
| background-color: $tosca; | |
| border: 2px solid $tosca; | |
| float: left; | |
| margin: 2em; | |
| .block{ | |
| position:absolute; | |
| background:#fff; | |
| width:230px; | |
| height:230px; | |
| display:block; | |
| border-radius:50%; | |
| top:10px; | |
| left:10px; | |
| } | |
| } | |
| #time{ | |
| font-size:3em; | |
| position:absolute; | |
| top:35%; | |
| left:43%; | |
| color:lighten(#000,60%); | |
| } | |
| .degree{ | |
| /*90 + ( 360 * .1 )*/ | |
| background-image: | |
| linear-gradient(90deg, transparent 50%, white 50%), | |
| linear-gradient(90deg, white 50%, transparent 50%); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment