Last active
November 16, 2021 16:29
-
-
Save MohammadTaseenKhan/45085630462ec9116b8b4078bed455f4 to your computer and use it in GitHub Desktop.
Progress Bar Liquid Bubble
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
<!-- | |
Inspired by Code Pen User | |
Jamie Dixon, with this pen | |
https://codepen.io/JamieDixon/pen/Pqrjvv | |
I cleaned up a lot of errors and redundant stuff | |
then made it more awesome and customizeable | |
--> | |
<div class="wrapper"> | |
<span class="instructions">The progress bubble below can transition between red, orange, and green depending on the current percentage.</span> | |
<span class="instructions">Go ahead and try it out by using the text box below.</span> | |
<div class="green"> | |
<div class="progress"> | |
<div class="inner"> | |
<div class="percent"><span>67</span>%</div> | |
<div class="water"></div> | |
<div class="glare"></div> | |
</div> | |
</div> | |
</div> | |
<span>Enter Percentage: <input type="text" placeholder="67" id="percent-box">%</span> | |
<section id="copyright"> | |
<div>(c) 2015 June Hanabi - <a href="https://opensource.org/licenses/MIT">License MIT</a> </div> | |
<div>Work is modified and inspired from <a href="https://codepen.io/JamieDixon/pen/Pqrjvv">Jamie Dixon's pen</a></div> | |
</section> | |
</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
var colorInc = 100 / 3; | |
$(function() | |
{ | |
$("#percent-box").click(function() | |
{ | |
$(this).select(); | |
}); | |
$("#percent-box").keyup(function() | |
{ | |
var val = $(this).val(); | |
if(val != "" | |
&& !isNaN(val) | |
&& val <= 100 | |
&& val >= 0) | |
{ | |
console.log(val); | |
var valOrig = val; | |
val = 100 - val; | |
if(valOrig == 0) | |
{ | |
$("#percent-box").val(0); | |
$(".progress .percent").text(0 + "%"); | |
} | |
else $(".progress .percent").text(valOrig + "%"); | |
$(".progress").parent().removeClass(); | |
$(".progress .water").css("top", val + "%"); | |
if(valOrig < colorInc * 1) | |
$(".progress").parent().addClass("red"); | |
else if(valOrig < colorInc * 2) | |
$(".progress").parent().addClass("orange"); | |
else | |
$(".progress").parent().addClass("green"); | |
} | |
else | |
{ | |
$(".progress").parent().removeClass(); | |
$(".progress").parent().addClass("green"); | |
$(".progress .water").css("top", 100 - 67 + "%"); | |
$(".progress .percent").text(67 + "%"); | |
$("#percent-box").val(""); | |
} | |
}); | |
}); |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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 "nib" | |
@keyframes spin | |
from | |
transform rotate(0deg) | |
to | |
transform rotate(360deg) | |
placeholder() | |
::-webkit-input-placeholder | |
{block} | |
:-moz-placeholder | |
{block} | |
::-moz-placeholder | |
{block} | |
:-ms-input-placeholder | |
{block} | |
text-glow() | |
text-shadow 0 0 arguments | |
box-glow() | |
box-shadow 0 0 arguments | |
// Page | |
page-font = sans-serif | |
page-background-color = darken(white, 90%) | |
progress-bubble($color, $amount) | |
// Progress Bar | |
progress-primary-color = $color | |
progress-size = 250px | |
progress-border-size = 5px | |
progress-inner-border-size = 5px | |
progress-inner-size = progress-size - (progress-border-size + progress-inner-border-size) | |
progress-inner-border = progress-inner-border-size solid page-background-color | |
progress-alpha = 50% | |
progress-level-change-speed = 1s | |
progress-swish-speed = 10s | |
progress-percent-color = darken(progress-primary-color, 40%) | |
progress-percent-glow = 10px darken(progress-percent-color, 25%) | |
progress-box-glow = 20px darken(progress-percent-color, 25%) | |
progress-liquid-glow = 20px darken(progress-percent-color, 5%) | |
progress-glare-background = rgba(255, 255, 255, 0.15) | |
progress-level = (100% - $amount) | |
.progress | |
+cache('.progress') | |
position relative | |
border-radius 50% | |
+cache('.progress' + progress-size) | |
width progress-size | |
height progress-size | |
+cache('.progress' + progress-border-size + " " + progress-primary-color) | |
border progress-border-size solid progress-primary-color | |
+cache('.progress' + progress-box-glow) | |
box-glow progress-box-glow | |
+cache('.progress' + progress-level-change-speed) | |
transition all progress-level-change-speed ease | |
.inner | |
+cache('.progress .inner') | |
position absolute | |
overflow hidden | |
z-index 2 | |
border-radius 50% | |
+cache('.progress .inner' + progress-inner-size) | |
width progress-inner-size | |
height progress-inner-size | |
+cache('.progress .inner' + progress-inner-border) | |
border progress-inner-border | |
+cache('.progress .inner' + progress-level-change-speed) | |
transition all progress-level-change-speed ease | |
.water | |
+cache('.progress .inner .water') | |
position absolute | |
z-index 1 | |
width 200% | |
height 200% | |
left -50% | |
border-radius 40% | |
animation-iteration-count infinite | |
animation-timing-function linear | |
animation-name spin | |
+cache('.progress .inner .water' + progress-level) | |
top progress-level | |
+cache('.progress .inner .water' + progress-primary-color + " " + progress-alph) | |
background alpha(progress-primary-color, progress-alpha) | |
+cache('.progress .inner .water' + progress-level-change-speed) | |
transition all progress-level-change-speed ease | |
+cache('.progress .inner .water' + progress-swish-speed) | |
animation-duration progress-swish-speed | |
+cache('.progress .inner .water' + progress-liquid-glow) | |
box-glow progress-liquid-glow | |
.glare | |
+cache('.progress .inner .glare') | |
position absolute | |
top -120% | |
left -120% | |
z-index 5 | |
width 200% | |
height 200% | |
transform rotate(45deg) | |
border-radius 50% | |
+cache('.progress .inner .glare' + progress-glare-background) | |
background-color progress-glare-background | |
+cache('.progress .inner .glare' + progress-level-change-speed) | |
transition all progress-level-change-speed ease | |
.percent | |
+cache('.progress .inner .percent') | |
position absolute | |
top 0 | |
left 0 | |
width 100% | |
height 100% | |
font-weight bold | |
text-align center | |
+cache('.progress .inner .percent' + progress-inner-size) | |
line-height progress-inner-size | |
font-size (progress-inner-size / 2.6px) | |
+cache('.progress .inner .percent' + progress-percent-color) | |
color progress-percent-color | |
+cache('.progress .inner .percent' + progress-percent-glow) | |
text-glow progress-percent-glow | |
+cache('.progress .inner .percent' + progress-level-change-speed) | |
transition all progress-level-change-speed ease | |
* | |
box-sizing border-box | |
html, body | |
height 100% | |
body | |
background-color page-background-color | |
font-family page-font | |
font-size 15px | |
color darken(white, 20%) | |
input[type="text"] | |
background-color transparent | |
margin-top 30px | |
border 0 | |
border-bottom solid 1px lighten(blue, 50%) | |
text-align center | |
font-size 20px | |
color lighten(rgb(50, 118, 237), 15%) | |
text-glow 3px lighten(rgb(50, 118, 237), 15%) | |
width 45px | |
display inline-block | |
input:focus | |
outline 0 | |
border-bottom dashed 1px lighten(red, 50%) | |
input::selection | |
color page-background-color | |
background-color lighten(lightblue, 30%) | |
+placeholder() | |
color lighten(rgb(50, 118, 237), 35%) | |
text-glow 3px lighten(rgb(50, 118, 237), 35%) | |
.wrapper | |
display flex | |
align-items center | |
justify-content center | |
flex-direction column | |
height 100% | |
.green | |
margin-top 15px | |
progress-bubble(rgb(83, 252, 83), 75%) | |
.red | |
margin-top 15px | |
progress-bubble(rgb(237, 59, 59), 25%) | |
.orange | |
margin-top 15px | |
progress-bubble(rgb(240, 124, 62), 50%) | |
#copyright | |
margin-top 25px | |
background-color transparent | |
font-size 14px | |
color darken(white, 30%) | |
text-align center | |
div | |
margin-bottom 10px | |
a | |
a:link | |
color gray | |
text-decoration none | |
border-bottom 1px solid gray | |
padding-bottom 2px | |
a:active | |
color darken(white, 30%) | |
a:hover | |
color darken(white, 30%) | |
border-bottom 1px solid darken(white, 30%) | |
padding-bottom 4px | |
.instructions | |
display inline-block | |
margin 5px 0 | |
font-size 16px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment