circular progress bar

minimal

code

            data-pie='{
  "percent": 75
}'

minimal width shadow

code

            // css
[data-pie-index='2'] {
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 25px 10px #a2caff;
}
// html
data-pie='{
  "percent": 75
}'

simple

code

            data-pie='{ 
  "percent": 75,
  "colorSlice": "#BF360C",
  "colorCircle": "#f1f1f1",
  "fontWeight": 100
}'

linear gradient

code

            data-pie='{ 
  "lineargradient": ["yellow","#ff0000"],
  "round": true,
  "percent": 75,
  "colorCircle": "#e6e6e6"
}'

counterclockwise

code

            data-pie='{ 
  "inverse": true,
  "percent": 75,
  "colorSlice": "#AB47BC",
  "colorCircle": "#f1f1f1",
  "fontWeight": 100
}'

stroke-dasharray

code

            data-pie='{ 
  "strokeDasharray": "1, 2",
  "percent": 75,
  "colorSlice": "#F5F5F5",
  "colorCircle": "#424242",
  "stroke": 5,
  "strokeBottom": 10,
  "round": true
}'

animation off

code

            data-pie='{ 
  "animationOff": true,
  "percent": 75,
  "colorSlice": "#CDDC39",
  "colorCircle": "#f1f1f1",
  "fontWeight": 100
}'

without number

code

            data-pie='{ 
  "number": false,
  "percent": 75,
  "colorSlice": "#000",
  "colorCircle": "#e6e6e6"
}'

rotation

code

            data-pie='{ 
  "rotation": 90,
  "percent": 75,
  "colorSlice": "#ff8c69",
  "colorCircle": "#f1f1f1",
  "fontWeight": 100
}'

fill

code

                  data-pie='{ 
  "fill": "#EFEBE9",
  "percent": 75,
  "stroke": 6,
  "strokeBottom": 10,
  "colorSlice": "#4E342E",
  "colorCircle": "#EFEBE9",
  "fontSize": "1.3em",
  "round": true
}'

unit

code

            data-pie='{ 
  "unit": "PL",
  "percent": 75,
  "stroke": 5,
  "strokeBottom": 10,
  "colorSlice": "#fff",
  "colorCircle": "#F50057",
  "round": true
}'

stroke bottom

code

            data-pie='{ 
  "strokeBottom": 5,
  "percent": 75,
  "colorSlice": "#EC407A",
  "colorCircle": "#f1f1f1",
  "round": true
}'

SPEED

code

            data-pie='{ 
  "speed": 30,
  "percent": 75,
  "colorSlice": "#DD2C00",
  "colorCircle": "#f1f1f1",
  "round": true
}'

cut

code

            data-pie='{ 
  "cut": 30,
  "percent": 75,
  "rotation": 144,
  "colorSlice": "#F50057",
  "colorCircle": "#f1f1f1",
  "textPosition": "1em",
  "fontSize": "1.2rem"
}'

texpositon

code

            data-pie='{ 
  "textPosition": "1.5em",
  "percent": 75,
  "colorSlice": "#880E4F",
  "colorCircle": "#f1f1f1",
  "fontSize": "1em"
}'

mixed

code

❤

            // css
[data-pie-index='16'] {
  position: relative;
  border-radius: 50%;
  box-shadow: inset 0 0 25px 10px #f50057;
}
.heart {
  position: absolute;
  font-size: 3rem;
  margin: auto;
  width: 100%;
  bottom: 45px;
  text-align: center;
  animation: heart 0.8s linear infinite;
  text-shadow: 0px 0px 10px #f50057;
}
@keyframes heart {
  0% {
    transform: scale(1.07);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

// html
data-pie='{
  "percent": 75,
  "textPosition": "0em",
  "colorSlice": "#FF1744",
  "colorCircle": "#fff",
  "stroke": 5,
  "strokeBottom": 10,
  "strokeDasharray": "1, 3",
  "fontSize": "1.2rem",
  "fontWeight": 600,
  "round": true
}'

update props

code

            <script>
  setInterval(() => {
    const typeFont = [100, 200, 300, 400, 500, 600, 700];
    const colorHex = `#${Math.floor((Math.random() * 0xffffff) << 0).toString(16)}`;
    const options = {
      index: 16,
      percent: Math.floor((Math.random() * 100) + 1),
      colorSlice: colorHex,
      fontColor: colorHex,
      fontSize: `${Math.floor(Math.random() * (1.4 - 1 + 1) + 1)}rem`,
      fontWeight: typeFont[Math.floor(Math.random() * typeFont.length)]
    }
    circle.animationTo(options);
  }, 3000);
</script>

smooth animation

code

            data-pie='{ 
  "animationSmooth": "1s ease-out",
  "percent": 75,
  "colorSlice": "#6200EA",
  "colorCircle": "#f1f1f1"
}'

global configuration

code

            // html
data-pie='{
 "percent": 75
}'

// js
const globalConfig = {
  index: 58,
  speed: 30,
  animationSmooth: "1s ease-out",
  strokeBottom: 5,
  colorSlice: "#FF6D00",
  colorCircle: "#f1f1f1",
  round: true
}

const global = new CircularProgressBar('global', globalConfig);

circular-progress-bar