easy-circular-progress

easy circular progress component with counting effect.

View demo View Github

Install

npm install easy-circular-progress --save

Quick Start

<template>
  <div id="app">
    <Progress value="16.88">
      <!-- <template v-slot:footer>
        <b>goood</b>
      </template>-->
    </Progress>
    <Progress strokeColor="#FF00AA" value="16.88">
      <template v-slot:footer>
        <b>More Color</b>
      </template>
    </Progress>

    <Progress :radius="50" :strokeWidth="10" value="86.12">
      <template v-slot:footer>
        <b>Bolder & Bigger One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="50"
      :strokeWidth="10"
      value="86.12"
    >
      <template v-slot:footer>
        <b>Slow One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="55"
      :strokeWidth="10"
      value="86.12567"
    >
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>

    <Progress :transitionDuration="5000" :radius="55" :strokeWidth="10" value="86.12567">
      <div class="content">hello</div>
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>
  </div>
</template>

<script>
import Progress from "./index.vue";

export default {
  name: "app",
  components: {
    Progress
  }
};
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100vh;
  color: #fff;
  background: #3e423a;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  margin: 0;
  padding: 0;
}
</style>

Prop Types

Property Type Required? Description
strokeWidth Number default is 4, the width of the progress circle, the bigger the bolder
radius Number the inner circle radius, default is 38
transitionDuration Number default is 1000, transitionDuration for the animation
strokeColors String default is "#aaff00"
value Number | String default is 0.0, should be less or equal then 100

Slot

Slot Name Description
footer we can add a footer for the circle
default the content displayed in the circle

if default slot provided, the coutdown effect will be ignored.

Advance Guide

Customized Theme

  • In your customized scss file (demo.scss)
$--circular-progress-int-fz: 28px;
$--circular-progress-dec-fz: 12px;
@import '~easy-circular-progress/src/index';
  • import the scss to override the default theme in main.js (entry file) before you import the Draw component
import './demo.scss';

variables

We split the number into two parts (int, dec)
We can define the font-size for each part

  • $--circular-progress-int-fz: 28px;
  • $--circular-progress-dec-fz: 12px;

Possibly Polyfill

Number.isNaN =
  Number.isNaN ||
  function(value) {
    return value !== value;
  };

GitHub