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

The first step in getting started with MySQL database is to create a table

Create a database Right click - Create a new data...

Steps for Docker to build a private warehouse Harbor

Harbor Harbor is an open source solution for buil...

How to optimize the slow Like fuzzy query in MySQL

Table of contents 1. Introduction: 2. The first i...

Implementation of modifying configuration files in Docker container

1. Enter the container docker run [option] image ...

Detailed explanation of the idea of ​​achieving the point-earning effect with CSS animation

In the recent project, we need to create an effec...

MySQL 5.7 deployment and remote access configuration under Linux

Preface: Recently I am going to team up with my p...

HTML table tag tutorial (36): table header background color attribute BGCOLOR

The <TH> tag is used to set the properties ...

MySQL master-slave synchronization mechanism and synchronization delay problem tracking process

Preface As a DBA, you will often encounter some M...

Detailed explanation of reduce fold unfold usage in JS

Table of contents fold (reduce) Using for...of Us...

Implementing Binary Search Tree in JavaScript

The search binary tree implementation in JavaScri...

MySQL Basics Quick Start Knowledge Summary (with Mind Map)

Table of contents Preface 1. Basic knowledge of d...

MySQL Database Basics: A Summary of Basic Commands

Table of contents 1. Use help information 2. Crea...

js to achieve a simple magnifying glass effect

This article shares the specific code of js to ac...

Summary of 28 common JavaScript string methods and usage tips

Table of contents Preface 1. Get the length of a ...

Detailed examples of Linux disk device and LVM management commands

Preface In the Linux operating system, device fil...