Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS only order process steps

CSS only order process steps

It's been a while. Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.

A Pen by Jamie Coulter on CodePen.

License.

-@steps = ['Start order', 'Prepare gift', 'Pack gift', 'Decorate box', 'Send gift']
.progress
.progress_inner
-@steps.each_with_index do |step, i|
.progress_inner__step
%label{:for => "step-#{i + 1}"} #{step}
%input{:type => 'radio', :name => 'step', :id => "step-1", :checked => 'checked'}
-(1..4).each_with_index do |i|
%input{:type => 'radio', :name => 'step', :id => "step-#{i + 1}"}
.progress_inner__bar
.progress_inner__bar--set
.progress_inner__tabs
-@steps.each_with_index do |step, i|
.tab{:class => "tab-#{i}"}
%h1 #{step}
%p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.
.progress_inner__status
.box_base
.box_lid
.box_ribbon
.box_bow
.box_bow__left
.box_bow__right
.box_item
.box_tag
.box_string
$font: 'Nunito', sans-serif;
$scheme-base: #a6cde2;
$color-bg: $scheme-base;
$color-mid: darken($scheme-base, 14);
$color-dark: darken($scheme-base, 40);
$steps: 5; // Change in html
$step-width: 100% / $steps;
$step-point-width: 30px;
$step-point-height: $step-point-width;
$step-point-color: $color-mid;
$step-point-bg: white;
$step-font-size: 14px;
$step-padding: 10px;
$step-gap: 50px;
$tab-spacing: 80px;
$form-width: 700;
$counter-spacing: 3px;
$counter-font-size: 12px;
$bar-transition-speed: 800ms;
$bar-bg: repeating-linear-gradient(
45deg,
#1ea4ec,
#1ea4ec 4px,
#1f8bc5 4px,
#1f8bc5 10px
);
$bar-height: 6px;
$status-width: 40px;
$box-color: #986c5d;
$box-color: repeating-linear-gradient(
45deg,
#986c5d,
#986c5d 2px,
#775144 2px,
#775144 4px
);
$lid-color: #775144;
$box-lid-offset: 4px;
$box-item-color: #be69d2;
$box-item-thickness: 4px;
$box-item-width: $status-width - 20;
$box-item-height: $box-item-width;
$ribbon-color: #ee0f29;
$ribbon-width: $status-width / 4;
$bow-width: 6px;
$bow-height: 10px;
$bow-color: darken($ribbon-color, 10);
@mixin move-item($item, $top, $left, $opacity) {
& > .#{$item} {
top: $top;
left: $left;
opacity: $opacity;
}
}
%box-animation-5{
@include move-item('box_base', 50%, 0px, 1);
@include move-item('box_item', -30px, 0px, 0);
}
%box-animation-4{
@extend %box-animation-5;
@include move-item('box_lid', -20px, 0px, 0);
@include move-item('box_item', -10px, 0px, 1);
}
%box-animation-3{
@extend %box-animation-5;
@include move-item('box_item', 10px, 0px, 1);
@include move-item('box_lid', -1px, 0px, 1);
@include move-item('box_ribbon', 70%, 0px, 0);
@include move-item('box_bow', 0px, 0px, 0);
}
%box-animation-2{
@extend %box-animation-5;
@extend %box-animation-4;
@extend %box-animation-3;
@include move-item('box_ribbon', 50%, 0px, 1);
@include move-item('box_bow', -10px, 0px, 1);
}
%box-animation-1{
@extend %box-animation-5;
@extend %box-animation-4;
@extend %box-animation-3;
@extend %box-animation-2;
@include move-item('box_tag', 10px, 20px, 1);
@include move-item('box_string', 10px, 20px, 1);
}
@mixin traverse($n) {
$step: '';
$tab: '';
@for $i from 1 through $n {
$int: #{($n + 1) - $i};
& #step-#{$int}:checked #{$step} + div {
width: ($n - $i) * $step-width;
}
& #step-#{$int}:checked #{$step} + div + div + div {
& > .tab:nth-of-type(#{$int}) {
opacity: 1;
top: 0;
}
}
& #step-#{$int}:checked #{$step} + div + div + div + div {
right: - ($step-width / 2) + ($i * $step-width);
@extend %box-animation-#{$i};
}
$step: $step + '+ input';
$tab: $tab + '+ div';
}
}
@import url('https://fonts.googleapis.com/css?family=Nunito:400,900');
* {
box-sizing: border-box;
}
%center {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: auto;
}
%bar {
height: $bar-height;
left: $step-width / 2;
background: $bar-bg;
transition: width $bar-transition-speed cubic-bezier(0.915, 0.015, 0.300, 1.005);
border-radius: $bar-height;
width: 0;
position: relative;
z-index: -1;
}
%counter {
@extend %center;
width: $step-point-width;
height: $step-point-height;
color: $step-point-color;
background: $step-point-bg;
line-height: $step-point-height;
border: $counter-spacing solid $color-bg;
font-size: $counter-font-size;
top: $bar-height / 2;
border-radius: 100%;
transition: all .4s;
cursor: pointer;
pointer-events: none;
}
%step {
width: $step-width;
font-size: $step-font-size;
padding: 0 $step-padding;
transition: all .4s;
float: left;
text-align: center;
position: relative;
label {
padding-top: $step-gap;
top: -20px;
display: block;
position: relative;
cursor: pointer;
}
&:before {
@extend %counter;
}
&:hover {
color: white;
&:before {
color: white;
background: #1ea4ec;
}
}
}
body {
font-family: $font;
background: $color-bg;
color: $color-dark;
text-align: center;
font-weight: 900;
.progress {
&_inner {
@include traverse($steps);
@extend %center;
height: 200px;
width: $form-width + px;
@for $i from 1 through $steps {
&__step:nth-of-type(#{$i}) {
&:before {
content: '#{$i}';
}
}
}
&__step {
@extend %step;
}
&__bar {
@extend %bar;
&--set {
@extend %bar;
width: 100% - $step-width;
top: - $bar-height;
background: $color-mid;
position: relative;
z-index: -2;
}
}
&__tabs {
& .tab {
opacity: 0;
position: absolute;
top: 40px;
text-align: center;
margin-top: $tab-spacing;
box-shadow: 0px 2px 1px darken($color-bg, 10);
padding: 30px;
background: white;
border-radius: 10px;
transition: all .2s;
h1 {
margin: 0;
}
p {
font-weight: 400;
opacity: 0.8;
}
}
}
&__status {
width: $status-width;
height: $status-width;
top: - $status-width * 2;
transition: right $bar-transition-speed cubic-bezier(0.915, 0.015, 0.300, 1.005);
transform: translateX(50%);
position: absolute;
%animatable {
opacity: 0;
transition: all 600ms cubic-bezier(0.915, 0.015, 0.300, 1.005);
transition-delay: 300ms
}
div {
position: absolute;
@extend %animatable;
}
& .box_base {
@extend %center;
background: $box-color;
width: $status-width - $box-lid-offset;
height: $status-width;
z-index: 1;
border-radius: 1px;
}
& .box_lid {
width: $status-width;
height: $status-width / 3;
background: $lid-color;
z-index: 2;
border-radius: 1px;
top: 0;
}
& .box_item {
@extend %center;
width: $box-item-width;
height: $box-item-height;
background: $box-item-color;
z-index: 0;
border-radius: 4px;
transform: rotate(45deg);
}
& .box_ribbon {
@extend %center;
width: $ribbon-width;
height: $status-width + 2;
background: $ribbon-color;
z-index: 4;
border-radius: 1px;
}
%bow {
width: $bow-width;
height: $bow-height;
background: $bow-color;
position: absolute;
z-index: 3;
opacity: 1;
border-radius: 1px;
}
& .box_bow {
@extend %center;
top: - $bow-width;
z-index: 1;
transition-delay: 500ms;
&__left {
@extend %bow;
@extend %center;
left: $bow-width;
transform: rotate(45deg);
}
&__right {
@extend %bow;
@extend %center;
left: -4px;
transform: rotate(-45deg);
}
}
// Refactor
& .box_tag {
@extend %center;
width: 20px;
height: 10px;
background: #487ac7;
z-index: 4;
transform: rotate(-10deg) translateX(-40px) translateY(0px);
border-radius: 2px;
transition-delay: 500ms
}
& .box_string {
width: 17px;
height: 2px;
background: #343434;
@extend %center;
z-index: 4;
transform: rotate(-39deg) translateX(-22px) translateY(-12px);
}
//
}
input[type="radio"] {
display: none;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.