Using CSS3 to achieve progress bar effect and dynamically add percentage

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

Recommend

Using Docker+jenkins+python3 environment to build a super detailed tutorial

Preface: After the automation is written, it need...

MySQL time types and modes details

Table of contents 1. MySQL time type 2. Check the...

Configure Mysql master-slave service implementation example

Configure Mysql master-slave service implementati...

Why does MySQL paging become slower and slower when using limit?

Table of contents 1. Test experiment 2. Performan...

JavaScript event loop case study

Event loop in js Because JavaScript is single-thr...

Detailed explanation of using INS and DEL to mark document changes

ins and del were introduced in HTML 4.0 to help au...

Native JS to implement real-time clock

Share a real-time clock effect implemented with n...

Quickly learn MySQL basics

Table of contents Understanding SQL Understanding...

Detailed steps to install MYSQL8.0 on CentOS7.6

1. Generally, mariadb is installed by default in ...

How to solve the element movement caused by hover-generated border

Preface Sometimes when hover pseudo-class adds a ...

What are the benefits of using B+ tree as index structure in MySQL?

Preface In MySQL, both Innodb and MyIsam use B+ t...

Detailed explanation of MySQL partition table

Preface: Partitioning is a table design pattern. ...

What kinds of MYSQL connection queries do you know?

Preface If the query information comes from multi...

Example of implementing the skeleton screen of WeChat applet

Table of contents What is a skeleton screen How t...

...