Skip to content

Instantly share code, notes, and snippets.

@ds0nt

ds0nt/Pure CSS Progress.markdown

Created August 26, 2015 09:07
Show Gist options
  • Save ds0nt/94054409e818093a0b2b to your computer and use it in GitHub Desktop.
Save ds0nt/94054409e818093a0b2b to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Progress
Raw
index.html
<div class="container">
<header>
<h1>Pure <strong>CSS</strong> Progress</h1>
<p>... a pretty liquid progress-bar.</p>
</header>
<section>
<article>
<input type="radio" name="switch-color" id="red" checked>
<input type="radio" name="switch-color" id="cyan">
<input type="radio" name="switch-color" id="lime">
<div class="chart">
<div class="bar bar-75 white">
<div class="face top">
<div class="growing-bar"></div>
</div>
<div class="face side-0">
<div class="growing-bar"></div>
</div>
<div class="face floor">
<div class="growing-bar"></div>
</div>
<div class="face side-a"></div>
<div class="face side-b"></div>
<div class="face side-1">
<div class="growing-bar"></div>
</div>
</div>
</div>
<p>Try another color :)</p>
<nav class="actions">
<label for="red">Red</label>
<label for="cyan">Cyan</label>
<label for="lime">Lime</label>
</nav>
</article>
<article>
<input type="radio" name="switch-pos" id="pos-0">
<input type="radio" name="switch-pos" id="pos-1">
<input type="radio" name="switch-pos" id="pos-2" checked>
<input type="radio" name="switch-pos" id="pos-3">
<div class="chart">
<div class="bar bar-30 white">
<div class="face top">
<div class="growing-bar"></div>
</div>
<div class="face side-0">
<div class="growing-bar"></div>
</div>
<div class="face floor">
<div class="growing-bar"></div>
</div>
<div class="face side-a"></div>
<div class="face side-b"></div>
<div class="face side-1">
<div class="growing-bar"></div>
</div>
</div>
</div>
<p>Try another position :)</p>
<nav class="actions">
<label for="pos-0">1/4</label>
<label for="pos-1">2/4</label>
<label for="pos-2">3/4</label>
<label for="pos-3">Full</label>
</nav>
</article>
<article>
<input type="radio" name="exercises" id="exercise-1" checked>
<input type="radio" name="exercises" id="exercise-2">
<input type="radio" name="exercises" id="exercise-3">
<input type="radio" name="exercises" id="exercise-4">
<div class="chart grid">
<div class="exercise second">
<div class="bar bar-45 navy lightGray-face">
<div class="face top">
<div class="growing-bar"></div>
</div>
<div class="face side-0">
<div class="growing-bar"></div>
</div>
<div class="face floor">
<div class="growing-bar"></div>
</div>
<div class="face side-a"></div>
<div class="face side-b"></div>
<div class="face side-1">
<div class="growing-bar"></div>
</div>
</div>
<div class="bar bar-80 yellow lightGray-face">
<div class="face top">
<div class="growing-bar"></div>
</div>
<div class="face side-0">
<div class="growing-bar"></div>
</div>
<div class="face floor">
<div class="growing-bar"></div>
</div>
<div class="face side-a"></div>
<div class="face side-b"></div>
<div class="face side-1">
<div class="growing-bar"></div>
</div>
</div>
<div class="bar bar-60 red lightGray-face">
<div class="face top">
<div class="growing-bar"></div>
</div>
<div class="face side-0">
<div class="growing-bar"></div>
</div>
<div class="face floor">
<div class="growing-bar"></div>
</div>
<div class="face side-a"></div>
<div class="face side-b"></div>
<div class="face side-1">
<div class="growing-bar"></div>
</div>
</div>
</div>
</div>
<p><em>It's liquid</em>, so adding a bit of code you can make charts like this :P</p>
<nav class="actions">
<label for="exercise-1">E-1</label>
<label for="exercise-2">E-2</label>
<label for="exercise-3">E-3</label>
<label for="exercise-4">E-4</label>
</nav>
</article>
</section>
</div>
Raw
Pure CSS Progress.markdown

Pure CSS Progress

Pure CSS Progress, a pretty liquid progress-bar. I've coded Pure CSS Navigation triggers too, if you want the bar's code just follow the css comments :)

A Pen by Rafael González on CodePen.

License.

Raw
style.css
@import 'compass/reset';
@import 'compass/css3';
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
$yellow: #f1c40f;
$lime: #76c900;
$navy: #0a4069;
$cyan: #57caf4;
$red: #ec008c;
$white: #fefefe;
$gray: #444;
$lightGray: lighten($gray, 30);
$transitionDuration: .3s;
$transition: all $transitionDuration ease-in-out;
body
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1em;
text-align: center;
color: $gray;
background: #d0d0d0;
}
h1
{
font-size: 2.5em;
margin: 2em 0 .5em;
}
h2
{
margin-bottom: 3em;
}
em,
strong
{
font-weight: 700;
}
input
{
display: none;
}
header p
{
margin-bottom: 0;
}
section
{
display: flex;
justify-content: center;
flex-direction: column;
margin-bottom: 2em;
padding: 0;
&:last-of-type
{
margin-bottom: 0;
}
article
{
align-self: center;
width: 20em;
margin-bottom: 2em;
p,
&:last-of-type
{
margin-bottom: 0;
}
}
}
p
{
line-height: 1.5em;
max-width: 20em;
margin: 1.5em auto 2em;
padding-bottom: 1.5em;
span
{
display: block;
}
}
.container
{
z-index: 1;
display: flex;
overflow: hidden;
flex-direction: column;
justify-content: center;
margin-bottom: 4em;
}
/*
*
*
START // CHART'S RULES
-> "if you're picking code, don't forget the variables :)"
*/
.chart
{
font-size: 1em;
perspective: 1000px;
perspective-origin: 50% 50%;
backface-visibility: visible;
}
$faceColor: rgba($white, .3);
$growColor: rgba($red, .6);
.bar
{
font-size: 1em;
position: relative;
height: 10em;
transition: $transition;
transform: rotateX(60deg) rotateY(0deg);
transform-style: preserve-3d;
.face
{
font-size: 2em;
position: relative;
width: 100%;
height: 2em;
background-color: $faceColor;
&.side-a,
&.side-b
{
width: 2em;
}
}
.side-a
{
transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}
.side-b
{
transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
position: absolute;
right: 0;
}
.side-0
{
transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}
.side-1
{
transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}
.top
{
transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}
.floor
{
box-shadow: 0 .1em 0.6em rgba(0,0,0,.3), .6em -0.5em 3em rgba(0,0,0,.3), 1em -1em 8em $white;
}
}
.growing-bar
{
transition: $transition;
background-color: $growColor;
width: 100%;
height: 2em;
}
@mixin drawSkin($color, $name)
{
.bar.#{$name}
{
.side-a,
// &.bar-100 .side-b,
.growing-bar
{
background-color: rgba($color, .6);
}
.side-0 .growing-bar
{
box-shadow: -0.5em -1.5em 4em $color;
}
.floor .growing-bar
{
box-shadow: 0em 0em 2em $color;
}
}
}
@mixin drawFaces($color, $name)
{
.chart .bar.#{$name} .face
{
background-color: rgba($color, .2);
}
}
@include drawSkin(rgba($yellow, .8), 'yellow');
@include drawSkin(rgba($red, .8), 'red');
@include drawSkin($cyan, 'cyan');
@include drawSkin(rgba($navy, .8), 'navy');
@include drawSkin($lime, 'lime');
@include drawSkin($white, 'white');
@include drawSkin($gray, 'gray');
@include drawFaces(rgba($yellow, .6), 'yellow-face');
@include drawFaces($lime, 'lime-face');
@include drawFaces(rgba($red, .6), 'red-face');
@include drawFaces(rgba($navy, .6), 'navy-face');
@include drawFaces($cyan, 'cyan-face');
@include drawFaces($gray, 'gray-face');
@include drawFaces($lightGray, 'lightGray-face');
@for $i from 0 to 101
{
.bar-#{$i}
{
.growing-bar
{
width: percentage($i/100);
}
}
}
/*
END // CHART'S RULES
*
*
*/
.chart.grid
{
display: flex;
flex-direction: row;
.exercise
{
flex: 0 0 100%;
display: flex;
.bar
{
flex: 1;
margin: 0 .5em;
&:nth-child(2)
{
z-index: 8;
flex: 1 0 40%;
}
&:first-child
{
z-index: 10;
margin-left: 0;
}
&:last-child
{
margin-right: 0;
}
}
}
}
.actions
{
display: flex;
justify-content: center;
margin-bottom: 0;
padding-bottom: 2em;
border-bottom: 1px dotted rgba($gray, .4);
}
label
{
box-sizing: border-box;
padding: 1em;
margin: 0 .2em;
cursor: pointer;
transition: all .15s ease-in-out;
color: $navy;
border: 1px solid rgba($white, .6);
border-radius: 0;
flex: 1;
&:first-child
{
margin-left: 0;
border-radius: .2em 0 0 .2em;
}
&:last-child
{
margin-right: 0;
border-radius: 0 .2em .2em 0;
}
}
input[id='exercise-1']:checked ~ .actions label[for='exercise-1'],
input[id='exercise-2']:checked ~ .actions label[for='exercise-2'],
input[id='exercise-3']:checked ~ .actions label[for='exercise-3'],
input[id='exercise-4']:checked ~ .actions label[for='exercise-4'],
input[id='pos-0']:checked ~ .actions label[for='pos-0'],
input[id='pos-1']:checked ~ .actions label[for='pos-1'],
input[id='pos-2']:checked ~ .actions label[for='pos-2'],
input[id='pos-3']:checked ~ .actions label[for='pos-3'],
input[id='red']:checked ~ .actions label[for='red'],
input[id='cyan']:checked ~ .actions label[for='cyan'],
input[id='lime']:checked ~ .actions label[for='lime']
{
color: $lime;
border: 1px solid darken($navy, 15);
background-color: $navy;
}
input[id='red']:checked ~ .chart
{
@extend .bar.red;
}
input[id='cyan']:checked ~ .chart
{
@extend .bar.cyan;
}
input[id='lime']:checked ~ .chart
{
@extend .bar.lime;
}
input[id='pos-0']:checked ~ .chart
{
@extend .bar-25;
}
input[id='pos-1']:checked ~ .chart
{
@extend .bar-50;
}
input[id='pos-2']:checked ~ .chart
{
@extend .bar-75;
}
input[id='pos-3']:checked ~ .chart
{
@extend .bar-100;
}
input[id='exercise-2']:checked ~ .chart.grid
{
.exercise .bar
{
&:nth-child(1)
{
flex: 1 0 0%;
@extend .bar-20;
}
&:nth-child(2)
{
flex: 1;
@extend .bar-50;
}
&:nth-child(3)
{
flex: 1 0 30%;
@extend .bar-80;
}
}
}
input[id='exercise-3']:checked ~ .chart.grid
{
.exercise .bar
{
&:nth-child(1),
&:nth-child(2),
&:nth-child(3)
{
flex: 1;
@extend .bar-70;
}
}
}
input[id='exercise-4']:checked ~ .chart.grid
{
.exercise .bar
{
&:nth-child(1),
&:nth-child(2)
{
flex: 1 0 30%;
@extend .bar-50;
}
&:nth-child(3)
{
flex: 1;
@extend .bar-100;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment