siimee/frontend/src/components/AspectBar.vue

<template lang="pug">
figure.w-flex.column
    figcaption.w-flex.xs12.justify-space-between.align-center
        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }}
    w-progress(v-model="percentage" size="0.5em" round).mb7
</template>

<script>
export default {
    props: {
        labels: {
            required: true,
            type: Array,
        },
        percentage: {
            required: false,
            type: Number,
            default: 50,
        },
    },
    data: () => ({}),
}
</script>
<style lang="sass">
    figure
        figcaption
            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
            text-transform: capitalize
            .main
                color: #4D9127
                font-weight: bold
                text-transform: uppercase


        .w-progress
            background-color: #4C5264
            .w-progress__progress
                color: #4D9127
        
</style>