Using CSS3 to achieve progress bar effect and dynamically add percentage

During the project, I started using the js requestAnimationFrame method to implement the progress bar, but it greatly affected the performance when there was a lot of data, so I used CSS to implement it and optimize it.

First paste the code:

<!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 proportion of the progress bar<p class="process-animate"></p>
        </div>
    </div>
</body>
</html>

Effect diagram (copy the code to view the dynamic effect):

Under normal circumstances, the percentage must be calculated based on the background data, so it is dynamically passed in. The Vue code is posted below

Progress bar subcomponent (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: {
      //Gray 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 changes dynamically. Change border-radius: inherit through js;
    .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 calls:

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

See the actual effect:

over; perfectly uses CSS to solve the performance consumption of JS recursive animation.

This is the end of this article about using CSS3 to achieve progress bar effects and dynamically add percentages. For more relevant CSS3 progress bar adding dynamic percentage content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Vue.js style layout Flutter business development common skills

>>: HTML meta viewport attribute detailed description