Using CSS3 to realize the effect of progress bar and dynamic adding percentage

Time:2021-4-11

In the process of the project, we began to use js’s request animation frame method to realize the progress bar, but when there are too many data, it greatly affects the performance, so we use CSS to realize and optimize it.

Post code first:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
 
        .box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}
        .child{position: relative;height:100%;border-radius:inherit;}
 
        .process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
            animation: process 1s linear forwards ;
        }
        @keyframes process
        {
            0%{
                left:0;right:100%;
            }
            20%{
                right:80%
            }
            40%{
                right:60%;
            }
            60%{right:40%;}
            80%{right:20%;}
            100%{right:0;}
        }
	
    </style>
</head>
<body>
    <div class="box">
        <div class="child" style=" width:50% "> // the percentage of child is the percentage effect of progress bar
            <p class="process-animate"></p>
        </div>
    </div>
</body>
</html>

Rendering (copy code to view dynamic effect)

Under normal circumstances, the percentage must be calculated according to the background data, so it is passed in dynamically. The Vue code is pasted below

Progress bar sub component( progress.vue ):

<template>
  <div class="process-wrapper" :class="{'addGray':addGray}">
    <div class="process-child" ref="processChild">
      <p class="process-animate" :class="{'addGray':addGray}"></p>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    addGray: {
      //Ash placement
      type: Boolean,
      default: false
    },
    progressWidth: {
      //Progress bar percentage
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.addGray, "addGray---");
      this.$ refs.processChild.style .width =  this.progressWidth  +"%"; // dynamically change the progress bar
      // this.$ refs.processChild.style . width = 90 + "%"; test effect
    });
  }
};
</script>
 
<style lang="scss" scoped>
.process-wrapper {
  width: 1.98rem;
  height: 0.13rem;
  margin: 0.12rem 0 0.1rem 0;
  border-radius: 0.1rem;
  background: #fff;
  border: 0.01rem solid #ff6780;
  &.addGray {
    background: #999;
    border: 0.01rem solid #999;
  }
  .process-child {
    position: relative;
    height: 100%;
    //Width: 100%; // this width is dynamic change. Change through JS
    border-radius: inherit;
    .process-animate {
      background: #ff6780;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: inherit;
      animation: process 1s linear forwards;
      &.addGray {
        background: #999 !important;
        // border: 0.01rem solid #999;
      }
    }
  }
}
 
@keyframes process {
  0% {
    left: 0;
    right: 100%;
  }
  20% {
    right: 80%;
  }
  40% {
    right: 60%;
  }
  60% {
    right: 40%;
  }
  80% {
    right: 20%;
  }
  100% {
    right: 0;
  }
}
</style>

Parent component call:

<! -- progress bar -- >
 <Progress :addGray="inactive" :progressWidth="progressWidth"></Progress>

Look at the actual effect:

Perfect use of CSS to solve the JS recursive animation performance consumption.

So far, this article about using CSS3 to achieve the effect of progress bar and dynamic adding percentage is introduced here. For more related CSS3 progress bar adding dynamic percentage content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!