Progress Indicator

CheckboxIndicator.vue

<template>
    <section>
        <span class="circle" :class="{current: current, completed: complete}">
            <span v-if="complete" class="fa fa-check u-icon__inner text-white"></span>
        </span>
        <small class="description"><slot></slot></small>
    </section>
</template>

<script>
    export default {
        name: "CheckboxIndicator",
        props: {
            current: {type: Boolean, required: true, default: false},
            complete: {type: Boolean, required: true, default: false},
        }
    }
</script>

<style scoped>
    /* Circle Styles */
    span.circle {
        position: relative;
        display: inline-block;
        border-radius: 50%;
        height: 2.25rem;
        width: 2.25rem;
        border: 2px solid hsl(209, 33%, 78%);
        background-color: transparent;
    }

    span.circle.current {
        border-color: var(--primary);
    }

    span.circle.current:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: .5rem;
        width: .5rem;
        background-color: var(--primary);
        border-radius: 50%;
    }

    span.circle.completed {
        border-color: var(--primary);
        background-color: var(--primary);
    }

    /* Description Styles */

    .description {
        width: 5.5rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: hsl(209, 13%, 48%);
    }

    /* Spacing stuffs */

    section {
        position: relative;
        height: 2.25rem;
    }
</style>

ProgressIndicator.vue

<template>
    <div class="d-flex justify-content-between align-items-center">

        <checkbox-indicator :current="false" :complete="true">
            Select Trip
        </checkbox-indicator>

        <span class="between completed"></span>

        <checkbox-indicator :current="false" :complete="true">
            Select Applicant
        </checkbox-indicator>

        <span class="between completed"></span>

        <checkbox-indicator :current="false" :complete="true">
            Trip &amp; Travel Details
        </checkbox-indicator>

        <span class="between completed"></span>

        <checkbox-indicator :current="true" :complete="false">
            Contacts and Insurance
        </checkbox-indicator>

        <span class="between"></span>

        <checkbox-indicator :current="false" :complete="false">
            Applicant Details
        </checkbox-indicator>

        <span class="between"></span>

        <checkbox-indicator :current="false" :complete="false">
            Finalize Application
        </checkbox-indicator>

    </div>
</template>

<script>
    import CheckboxIndicator from './CheckboxIndicator';

    export default {
        name: "ProgressIndicator",
        components: {
            CheckboxIndicator
        }
    }
</script>

<style scoped>
    /* Between Styles */

    .between {
        flex: 1;
        height: 2px;
        border-bottom: 2px dashed hsl(209, 33%, 78%);
    }

    .between.completed {
        border-bottom: 2px solid var(--primary);
    }
</style>