WeChat applet component progress bar interpretation and analysis

This article introduces the progress bar interpretation and analysis of the applet component progress Progress Bar component description:

The progress bar indicates the current progress of the task, allowing you to visually perceive the task execution.
The progress bar of progress is a component of the applet, which is similar to the progress bar of HTML5.

The sample code of the progress bar component is as follows:

The following is the WXML code:

 
     
  
   
Q: When will an old driver drive?
      
  
 

The following is the JS code:

Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page jump}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

The following is the WXSS code:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 20px;}.con-pro{  color: cornflowerblue;}

The following is the WXML code:

 
     
  
   
Percentage not displayed
      
      
  
   
Display percentage (percentage font style is controlled by class)
      
      
  
   
Change the width of the progress bar: 15px
      
      
  
   
Change progress bar color (#): Black
      
      
  
   
Change progress bar color (defined): Orange
      
      
  
   
Attribute superposition
      
  
 

The following is the JS code:

Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page jump}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

The following is the WXSS code:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 10px;}.con-pro{  padding-bottom: 30px;  color: cornflowerblue;}

The following is the WXML code:

 
     
  
   
See my launch
      
  
 

The following is the JS code:

Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page jump}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

The following is the WXSS code:

.content{  padding-top: 20px;}.con-text{  display: block;  padding-bottom: 10px;}.con-pro{  padding-bottom: 30px;  color: cornflowerblue;}

Main properties of the progress bar:

Attribute	Type	Default value	Description
Percent	Float	0	0-Percentage
Show-info	Boolean	False	Percentage is displayed on the right of the progress bar, and the attribute is true.
Color	Color	#09BB07	Indicates the progress bar color, which can be # or the color attribute has been defined.
Stroke-width	Number	6	Unit: px, indicating the line width displayed on the progress bar
Active	Boolean	False	Indicates the animation of the progress bar from left to right, and the animation is stopped to the set percentage. if the attribute is written, the value is true.

The above is the detailed explanation and analysis of the progress bar of the mini-program component. For more information, see other related articles in the first PHP community!