<svg style="display:none">
<defs>
<symbol id="progress-step" viewBox="0 0 6 6">
<circle cx="3" cy="3" r="2" />
</symbol>
<symbol id="progress-bar" viewBox="0 0 6 6" preserveAspectRatio="none">
<rect height="3" width="6" y="1.5" x="0" stroke-width="4" />
</symbol>
</defs>
</svg>
<div class="widget-content" data-step="1">
<div class="progress-borders">
<svg class="progress-step">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step">
<use xlink:href="#progress-step"></use>
</svg>
</div>
<div class="progress-details">
<svg class="progress-step progress-step1">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step progress-step2">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step progress-step3">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step progress-step4">
<use xlink:href="#progress-step"></use>
</svg>
</div>
<svg class="progress-empty-border">
<use xlink:href="#progress-bar"></use>
</svg>
<svg class="progress-empty">
<use xlink:href="#progress-bar"></use>
</svg>
<div class="progress-indicator-container">
<svg class="progress-indicator">
<use xlink:href="#progress-bar"></use>
</svg>
</div>
<div class="progress-transit">
<svg class="progress-step-transit-border">
<use xlink:href="#progress-step"></use>
</svg>
<svg class="progress-step-transit">
<use xlink:href="#progress-step"></use>
</svg>
</div>
<svg class="progress-check" viewBox="0 0 30 30">
<g transform="rotate(30 15 16)">
<rect height="25" width="5" rx="3" ry="3" x="15" y="0" />
<rect height="5" width="15" rx="3" ry="3" x="5" y="20" />
</g>
</svg>
</div>
<button class="next">Next</button>
<button class="prev">Prev</button>
$background: #333;
$border: #111;
$success-color: #1d9099;
$pending-color:lighten(desaturate($success-color, 30%), 40%);
body {
background:$background;
padding:0;
margin:0;
}
.progress-details, .progress-borders {
position:absolute;
width:80%;
left:10%;
top:50%;
height:0;
display:flex;
justify-content:space-between;
align-items:center;
}
.progress-borders {
z-index:1;
.progress-step {
stroke: $border;
}
}
.progress-details {
z-index:3;
.progress-step {
fill:$pending-color;
&.active {
fill:$success-color;
}
}
}
.progress-step {
height:60px;
width:60px;
display:block;
border-radius:80px;
z-index:2;
}
.progress-transit {
position:absolute;
top:50%;
left:10%;
width:80%;
.progress-step-transit, .progress-step-transit-border {
@extend .progress-step;
position:absolute;
top:50%;
transform:translate(0, -50%);
transition: left .5s ease-in-out;
}
.progress-step-transit {
z-index:4;
fill:$success-color
}
.progress-step-transit-border {
z-index:1;
stroke:$border;
}
}
.progress-empty {
position:absolute;
width:calc(80% - 60px);
left:calc(10% + 30px);
height:20px;
top: calc(50% - 10px);
fill: $pending-color;
z-index:2;
}
.progress-empty-border {
@extend .progress-empty;
stroke:$border;
z-index:1;
}
svg.progress-check {
height:60px;
width:60px;
position:absolute;
top:50%;
right:10%;
transform: translate(0, -50%) scale(0);
fill: $pending-color;
z-index:4;
}
.progress-indicator-container{
@extend .progress-empty;
svg {
fill:$success-color;
height:100%;
transition:width .5s ease-in-out;
}
}
@mixin steps($step) {
[data-step="#{$step}"] {
.progress-indicator-container svg { width: percentage(($step - 1) / 3) }
@if $step > 1 {
.progress-step-transit, .progress-step-transit-border { left: calc(#{percentage(($step - 1) / 3)} - #{($step - 1) * 20}px) }
} @else {
.progress-step-transit, .progress-step-transit-border { left: 0 }
}
@for $x from 1 through $step {
svg.progress-step#{$x} { fill: $success-color; transition-delay: .5s; }
}
}
}
@include steps(1);
@include steps(2);
@include steps(3);
@include steps(4);
.next {
position: absolute;
right:0;
bottom:0;
}
.prev {
position:absolute;
left:0;
bottom:0;
}
@keyframes bounce {
0% { transform: translate(0, -50%) scale(0); }
50% {transform: translate(0, -50%) scale(1);}
60% {transform: translate(0, -50%) scale(.1);}
70% {transform: translate(0, -50%) scale(.8);}
80% {transform: translate(0, -50%) scale(.3);}
90% {transform: translate(0, -50%) scale(.6);}
100% {transform: translate(0, -50%) scale(.5);}
}
button {
margin:30px;
padding:10px 20px;
cursor:pointer;
color:$success-color;
border:$border solid 4px;
font-size:20px;
font-weight:bold;
background:$pending-color;
}
View Compiled
/*
This JavaScript is optional. It's just the method to modify the data-step attribute.
*/
var currentStep = 1;
setStep();
$(".next").click(function() {
if (currentStep < 4) {
currentStep++;
setStep();
}
})
$(".prev").click(function() {
if (currentStep > 1) {
currentStep--;
setStep();
}
})
function setStep() {
$(".widget-content").attr("data-step", currentStep);
};
This Pen doesn't use any external CSS resources.