student-client/src/features/OnlineExam/Examing/OverallProgress.vue

<template>
  <div class="progress-container">
    <i-progress
      :percent="progressNum"
      :stroke-width="20"
      status="active"
      hide-info
      style="color: black"
    >
    </i-progress>
    <span>{{ progress }}</span>
  </div>
</template>

<script>
export default {
  name: "OverallProgress",
  data() {
    return {};
  },
  props: {
    examQuestionList: Array,
  },
  async mounted() {},
  computed: {
    progressNum() {
      return (
        100 *
        (this.examQuestionList.filter(q => q.studentAnswer !== null).length /
          this.examQuestionList.length)
      );
    },
    progress: function() {
      return `${
        this.examQuestionList.filter(q => q.studentAnswer !== null).length
      } / ${this.examQuestionList.length}`;
    },
  },
};
</script>

<style scoped>
.progress-container {
  display: grid;
  justify-self: flex-start;

  align-items: center;
  justify-items: center;
  grid-template-columns: 200px 50px;
  width: 250px;
}
</style>

<style>
.progress-container .ivu-progress-inner {
  background-color: #02ffff;
  background-color: white;
  border-radius: 0px;
}

.progress-container .ivu-progress-bg {
  border-radius: 0px;
}
</style>