equation-admin-template/ltr/assets/css/elements/steps/steps.css

Booststrap 4 admin template made by equation

ul.step-progress-bar {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    list-style: none;
}
li.section {
    display: inline-block;
    padding-top: 100px;
    font-size: 14px;
    color: #515365;
    vertical-align: top;
    position: relative;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
li.section:before {
    font-family: "flaticon";
    content: "\e942";
    position: absolute;
    top: 2px;
    left: calc(41% - 15px);
    z-index: 1;
    width: 70px;
    height: 70px;
    color: #2b293d;
    border: 2px solid white;
    border-radius: 50%;
    line-height: 68px;
    background: #e9ecef;
}
.status-bar {
    height: 2px;
    background: #f1f3f1;
    position: relative;
    top: 44px;
    margin: 0 auto;
}
.current-status {
    height: 2px;
    width: 0;
    border-radius: 1px;
    background: #25d5e4;
}
@-webkit-keyframes changeBackground {
    from {background: gray}
    to {background: #25d5e4}
}
@keyframes changeBackground {
    from {background: gray}
    to {background: #25d5e4}
}
li.section.visited:before {
    font-family: "flaticon";
    content: "\e9c1";
    animation: changeBackground .5s linear;
    animation-fill-mode: forwards;
    font-size: 20px;
    color: #fff;
}
li.section.visited.current:before { box-shadow: 0 0 0 0px #18d17f; }
.progress-bar { background-color: #fff; box-shadow: inset 0 0px 0 rgba(0,0,0,.15); }

/* A totally custom override */
.progress-indicator.custom-complex {
    background-color: #f1f1f1;
    padding: 10px 5px;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.progress-indicator.custom-complex > li .bubble {
    height: 12px;
    width: 100%;
    border-radius: 2px;
    box-shadow: inset -5px 0 12px rgba(0, 0, 0, 0.2);
}

.progress-indicator.custom-complex > li .bubble:before,
.progress-indicator.custom-complex > li .bubble:after { display: none; }

/* Demo for vertical bars */
.progress-indicator.stepped.stacked {
    width: 48%;
    display: inline-block;
}
.progress-indicator.stepped.stacked > li { height: 150px; }
.progress-indicator.stepped.stacked > li .bubble { padding: 0.1em; }
.progress-indicator.stepped.stacked > li:first-of-type .bubble { padding: 0.5em; }
.progress-indicator.stepped.stacked > li:last-of-type .bubble { padding: 0em; }

@media screen and (max-width: 991px) {
    .progress-indicator.stacked > li { text-indent: 0px; }
    .progress-indicator.horizontal-step > li { font-size: 10px; }
    .status-bar { top: 26px; }
    li.section {
        padding-top: 50px;
        font-size: 12px;
    }
    li.section::before {
        font-family: "flaticon";
        content: "\e942";
        position: absolute;
        top: 2px;
        left: calc(41% - 15px);
        z-index: 1;
        width: 40px;
        height: 40px;
        color: white;
        border: 2px solid white;
        border-radius: 50%;
        line-height: 35px;
        background: #9a9a9a;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    li.section { font-size: 12px; }
}