Skip to content

Instantly share code, notes, and snippets.

@nyteshade

nyteshade/html.html

Created April 6, 2017 00:12
Show Gist options
  • Save nyteshade/a0ca0959beb2b3148be53897065fd910 to your computer and use it in GitHub Desktop.
Save nyteshade/a0ca0959beb2b3148be53897065fd910 to your computer and use it in GitHub Desktop.
Download ZIP
Copland Progress Bars
Raw
html.html
<div class="progress p0">
<div class="bar">
<div class="slice slice1"></div>
<div class="slice slice2"></div>
<div class="slice sliceN"></div>
<div class="slice slice3"></div>
<div class="slice slice4"></div>
<div class="slice slice5"></div>
</div>
<div class="track">
<div class="slice barborder"></div>
<div class="slice barshadow"></div>
<div class="slice trackstart"></div>
<div class="slice trackmiddle"></div>
<div class="slice trackend"></div>
</div>
</div>
<br>
<div class="progress p43">
<div class="bar">
<div class="slice slice1"></div>
<div class="slice slice2"></div>
<div class="slice sliceN"></div>
<div class="slice slice3"></div>
<div class="slice slice4"></div>
<div class="slice slice5"></div>
</div>
<div class="track">
<div class="slice barborder"></div>
<div class="slice barshadow"></div>
<div class="slice trackstart"></div>
<div class="slice trackmiddle"></div>
<div class="slice trackend"></div>
</div>
</div>
<br>
<div class="progress red p100">
<div class="bar">
<div class="slice slice1"></div>
<div class="slice slice2"></div>
<div class="slice sliceN"></div>
<div class="slice slice3"></div>
<div class="slice slice4"></div>
<div class="slice slice5"></div>
</div>
<div class="track">
<div class="slice barborder"></div>
<div class="slice barshadow"></div>
<div class="slice trackstart"></div>
<div class="slice trackmiddle"></div>
<div class="slice trackend"></div>
</div>
</div>
<br>
<div class="progress darkerGreen p34">
<div class="bar">
<div class="slice slice1"></div>
<div class="slice slice2"></div>
<div class="slice sliceN"></div>
<div class="slice slice3"></div>
<div class="slice slice4"></div>
<div class="slice slice5"></div>
</div>
<div class="track">
<div class="slice barborder"></div>
<div class="slice barshadow"></div>
<div class="slice trackstart"></div>
<div class="slice trackmiddle"></div>
<div class="slice trackend"></div>
</div>
</div>
<!--
240,67,60 -> 240, 50%, 40%
240,50,80 -> 240, 50%, 60%
240,40,100 -> 240, 100%, 80%
240,20,100 -> 240, 100%, 90%
0,0,93 -> 0, 0%, 93%
240,100,33 -> 240, 100%, 16%
0,0,33 -> 0, 0%, 33%
-->
Raw
progress.js
function hsv_to_hsl(h, s, v) {
// both hsv and hsl values are in [0, 1]
var l = (2 - s) * v / 2;
if (l != 0) {
if (l == 1) {
s = 0
} else if (l < 0.5) {
s = s * v / (l * 2)
} else {
s = s * v / (2 - l * 2)
}
}
return [h, s, l]
}
Raw
styles.scsss
div.progress {
$trackDisplay: inline-block;
$barDisplay: inline-block;
$progress: 25%;
$barHeight: 30px;
$borderWidth: 1px;
border: $borderWidth solid black;
font-size: 0;
position: relative;
height: $barHeight;
box-sizing: border-box;
&.complete {
.track {
display: none;
}
}
.bar, .track {
display: inline-block;
box-sizing: border-box;
position: relative;
height: 100%;
.slice {
position: relative;
height: 100%;
width: 1px;
display:inline-block;
overflow: hidden;
}
}
.bar {
width: $progress;
display: $barDisplay;
div.slice1 {
background-color: hsl(240, 50%, 60%);
width: 1px;
}
div.slice2 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl(240, 50%, 60%) 10%,
hsl(240, 100%, 80%) 20%,
hsl(240, 100%, 90%) 30%,
hsl(0, 0%, 93%) 40%,
hsl(0, 0%, 93%) 50%,
hsl(0, 0%, 93%) 60%,
hsl(240, 100%, 90%) 70%,
hsl(240, 100%, 80%) 80%,
hsl(240, 50%, 60%) 90%,
hsl(240, 50%, 40%) 100%
);
}
div.sliceN {
width: calc(100% - 5px);
background-image:
linear-gradient(180deg,
hsl(240, 50%, 40%) 10%,
hsl(240, 50%, 60%) 20%,
hsl(240, 100%, 80%) 30%,
hsl(240, 100%, 90%) 40%,
hsl(0, 0%, 93%) 50%,
hsl(240, 100%, 90%) 60%,
hsl(240, 100%, 80%) 70%,
hsl(240, 50%, 60%) 80%,
hsl(240, 50%, 40%) 90%,
hsl(240, 100%, 16%) 100%
);
}
div.slice3 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl(240, 50%, 40%) 10%,
hsl(240, 50%, 60%) 20%,
hsl(240, 100%, 80%) 30%,
hsl(240, 100%, 90%) 40%,
hsl(240, 100%, 90%) 50%,
hsl(240, 100%, 90%) 60%,
hsl(240, 100%, 80%) 70%,
hsl(240, 50%, 60%) 80%,
hsl(240, 50%, 40%) 90%,
hsl(240, 100%, 16%) 100%
);
}
div.slice4 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl(240, 50%, 40%) 10%,
hsl(240, 50%, 60%) 20%,
hsl(240, 50%, 40%) 30%,
hsl(240, 50%, 40%) 40%,
hsl(240, 50%, 40%) 50%,
hsl(240, 50%, 40%) 60%,
hsl(240, 50%, 40%) 70%,
hsl(240, 50%, 40%) 80%,
hsl(240, 50%, 40%) 90%,
hsl(240, 100%, 16%) 100%
);
}
div.slice5 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl(240, 50%, 40%) 10%,
hsl(240, 100%, 16%) 20%,
hsl(240, 100%, 16%) 30%,
hsl(240, 100%, 16%) 40%,
hsl(240, 100%, 16%) 50%,
hsl(240, 100%, 16%) 60%,
hsl(240, 100%, 16%) 70%,
hsl(240, 100%, 16%) 80%,
hsl(240, 100%, 16%) 90%,
hsl(240, 100%, 16%) 100%
);
}
}
.track {
width: calc(100% - #{$progress});
display: $trackDisplay;
div.barborder {
background-color: hsl(0, 0, 0);
width: 1px;
}
div.barshadow {
background-color: hsl(0, 0, 33%);
width: 1px;
}
div.trackstart {
background-color: hsl(0, 0, 53%)
}
div.trackmiddle {
width: calc(100% - 4px);
background-image:
linear-gradient(180deg,
hsl(0, 0, 53%) 10%,
hsl(0, 0, 73%) 20%,
hsl(0, 0, 73%) 30%,
hsl(0, 0, 73%) 40%,
hsl(0, 0, 73%) 50%,
hsl(0, 0, 73%) 60%,
hsl(0, 0, 73%) 70%,
hsl(0, 0, 73%) 80%,
hsl(0, 0, 73%) 90%,
hsl(0, 0, 53%) 100%
);
}
div.trackmiddle {
background-image:
linear-gradient(180deg,
hsl(0, 0, 73%) 10%,
hsl(0, 0, 87%) 20%,
hsl(0, 0, 87%) 30%,
hsl(0, 0, 87%) 40%,
hsl(0, 0, 87%) 50%,
hsl(0, 0, 87%) 60%,
hsl(0, 0, 87%) 70%,
hsl(0, 0, 87%) 80%,
hsl(0, 0, 87%) 90%,
hsl(0, 0, 87%) 100%
);
}
}
@for $i from 0 to 100 {
&.p#{$i} {
$progress: $i * 1%;
$trackDisplay: inline-block;
$barDisplay: inline-block;
@if $progress < 1% {
$barDisplay: none;
$trackDisplay: inline-block;
}
@if $progress > 99% {
$barDisplay: inline-block;
$trackDisplay: none;
}
.bar {
width: $progress;
display: $barDisplay;
}
.track {
width: calc(100% - #{$progress});
display: $trackDisplay;
}
}
}
$schemeDefault: default 240;
$schemeYellow: gold 30;
$schemeLime: lime 60;
$schemeGreen: green 90;
$schemeDarkerGreen: darkerGreen 120;
$schemeTiel: tiel 160;
$schemeLightBlue: lightBlue 190;
$schemeBrightBlue: brightBlue 210;
$schemeNavyBlue: navyBlue 240;
$schemePurple: purple 270;
$schemePink: pink 300;
$schemeMagenta: magenta 330;
$schemeRed: red 0;
$schemes: $schemeDefault $schemeYellow $schemeLime $schemeGreen $schemeDarkerGreen $schemeTiel $schemeLightBlue $schemeBrightBlue $schemeNavyBlue $schemePurple $schemePink $schemeMagenta $schemeRed;
@each $scheme in $schemes {
$colorClass: nth($scheme, 1);
$barHue: nth($scheme, 2);
&.#{$colorClass} {
.bar {
div.slice1 {
background-color: hsl($barHue, 50%, 60%);
width: 1px;
}
div.slice2 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl($barHue, 50%, 60%) 10%,
hsl($barHue, 100%, 80%) 20%,
hsl($barHue, 100%, 90%) 30%,
hsl(0, 0%, 93%) 40%,
hsl(0, 0%, 93%) 50%,
hsl(0, 0%, 93%) 60%,
hsl($barHue, 100%, 90%) 70%,
hsl($barHue, 100%, 80%) 80%,
hsl($barHue, 50%, 60%) 90%,
hsl($barHue, 50%, 40%) 100%
);
}
div.sliceN {
width: calc(100% - 5px);
background-image:
linear-gradient(180deg,
hsl($barHue, 50%, 40%) 10%,
hsl($barHue, 50%, 60%) 20%,
hsl($barHue, 100%, 80%) 30%,
hsl($barHue, 100%, 90%) 40%,
hsl(0, 0%, 93%) 50%,
hsl($barHue, 100%, 90%) 60%,
hsl($barHue, 100%, 80%) 70%,
hsl($barHue, 50%, 60%) 80%,
hsl($barHue, 50%, 40%) 90%,
hsl($barHue, 100%, 16%) 100%
);
}
div.slice3 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl($barHue, 50%, 40%) 10%,
hsl($barHue, 50%, 60%) 20%,
hsl($barHue, 100%, 80%) 30%,
hsl($barHue, 100%, 90%) 40%,
hsl($barHue, 100%, 90%) 50%,
hsl($barHue, 100%, 90%) 60%,
hsl($barHue, 100%, 80%) 70%,
hsl($barHue, 50%, 60%) 80%,
hsl($barHue, 50%, 40%) 90%,
hsl($barHue, 100%, 16%) 100%
);
}
div.slice4 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl($barHue, 50%, 40%) 10%,
hsl($barHue, 50%, 60%) 20%,
hsl($barHue, 50%, 40%) 30%,
hsl($barHue, 50%, 40%) 40%,
hsl($barHue, 50%, 40%) 50%,
hsl($barHue, 50%, 40%) 60%,
hsl($barHue, 50%, 40%) 70%,
hsl($barHue, 50%, 40%) 80%,
hsl($barHue, 50%, 40%) 90%,
hsl($barHue, 100%, 16%) 100%
);
}
div.slice5 {
width: 1px;
background-image:
linear-gradient(180deg,
hsl($barHue, 50%, 40%) 10%,
hsl($barHue, 100%, 16%) 20%,
hsl($barHue, 100%, 16%) 30%,
hsl($barHue, 100%, 16%) 40%,
hsl($barHue, 100%, 16%) 50%,
hsl($barHue, 100%, 16%) 60%,
hsl($barHue, 100%, 16%) 70%,
hsl($barHue, 100%, 16%) 80%,
hsl($barHue, 100%, 16%) 90%,
hsl($barHue, 100%, 16%) 100%
);
}
}
}
}
}
@nyteshade
Copy link
Author

image

http://codepen.io/nyteshade/pen/zqmBXZ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment