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

Linux service monitoring and operation and maintenance

Using CSS3 to achieve progress bar effect and dynamically add percentage

Linux service monitoring and operation and maintenance

How to install mysql in docker

Historical Linux image processing and repair solutions

Detailed explanation of how to implement login function by combining React with Antd's Form component

A brief analysis of Docker private image library and Alibaba Cloud object storage OSS

Example of implementing translation effect (transfrom: translate) with CSS3

CSS3 transition rotation perspective 2d3d animation and other effects example code

Alibaba Cloud OSS access rights configuration (RAM permission control) implementation

Understand the use of CSS3's all attribute

Summary of the advantages of Vue3 vs. Vue2

Recommend

Implementation code of the floating layer fixed on the right side of the web page

Detailed explanation of how MySQL (InnoDB) handles deadlocks

MySQL 8.0.14 installation and configuration method graphic tutorial

Summary of 6 skills needed to master web page production

Solution to Vue's inability to watch array changes

Sample code for CSS image animation effects (photo frame)

CSS realizes the mask effect when the mouse moves to the image

IIS7~IIS8.5 delete or modify the server protocol header Server

MySQL password is correct but cannot log in locally -1045

Docker primary network port mapping configuration

About the processing of adaptive layout (using float and margin negative margin)

Example analysis of mysql variable usage [system variables, user variables]

js to achieve cool fireworks effect

Example method to find keywords and their preceding and following information in Linux logs

Detailed explanation of CSS float property