Skip to content

Instantly share code, notes, and snippets.

@IsraelOrtuno
Created August 29, 2017 07:57
Show Gist options
  • Save IsraelOrtuno/253613097ada76ae933b090349119eed to your computer and use it in GitHub Desktop.
Save IsraelOrtuno/253613097ada76ae933b090349119eed to your computer and use it in GitHub Desktop.
Unlimited CSS Step bar with Laravel Blade, SASS and FontAwesome
<div class="progress">
@foreach ($steps as $step)
<div class="{{ $step[0] }}
{{ $loop->iteration > $currentStep ? '' : 'progress__step--active' }}
{{ $loop->iteration >= $currentStep ? '' : 'progress__step--done' }}">
{{ $step[1] }}
</div>
@endforeach
</div>
.progress {
display: flex;
&__step {
flex: 1;
text-align: center;
position: relative;
&:before {
display: flex;
font-family: "FontAwesome";
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: .75rem;
background: white;
color: #adb5bd;
border: 4px solid #e9ecef;
border-radius: 50%;
}
&:after {
width: 100%;
height: 4px;
content: '';
position: absolute;
background-color: #e9ecef;
top: 18px;
left: -50%;
z-index: -1;
}
&:first-child:after {
content: none;
}
&--active {
&:before {
border-color: green;
}
&:after {
background: green;
}
}
&--done {
&:before {
content: '\f00c';
color: white;
background: green;
border-color: green;
}
}
}
}
@component('steps')
@slot('steps', [
['fa-building-o', 'Company details'],
['fa-edit', 'Job details'],
['fa-file-text-o', 'Preview'],
['fa-credit-card', 'Checkout']
])
@slot('currentStep', 1)
@endcomponent
@IsraelOrtuno
Copy link
Author

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