qt 进度栏_HTML5进度栏

qt 进度栏

The impressive growth of HTML5 has put forth a myriad of new interesting tools and elements through which we can revamp the overall look and functionality of a website. And one of them is HTML5 progress bar.

HTML5令人印象深刻的增长提出了许多有趣的新工具和元素，通过它们我们可以改进网站的整体外观和功能。其中之一是HTML5进度栏。

HTML5进度栏 (HTML5 Progress Bar)

The introduction of ‘progress bar’ elements, allow developers to create a bar that shows the progress of a specific task such as downloading, uploading, file transferring, installation or anything that is in progress. HTML5 progress bar uses a motion or some other kind of indicator to display the total amount of work that has been done.

“进度条”元素的引入使开发人员可以创建一个条，以显示特定任务的进度，例如下载，上传，文件传输，安装或正在进行的任何操作。 HTML5进度栏使用动作或其他某种指示器来显示已完成的工作总量。

In this article, we are giving you some useful tips through which you can change the style of your html5 progress bar and make it look dynamic. But before we actually take you to the subject, let’s gain some basic idea about the progress bars.

在本文中，我们为您提供了一些有用的技巧，通过这些技巧，您可以更改html5进度栏的样式并使它看起来很动态。但是，在我们实际带您进入主题之前，让我们获得有关进度条的一些基本概念。

HTML5进度栏的基础 (The Basic of HTML5 Progress Bar)

It’s very simple to use a progress bar, all you need is to just add <progress> tag in your document, and you’ll get an indeterminate progress bar, which can be either in the form of spinning wheel or a horizontal bar.

使用进度条非常简单，只需在文档中添加<progress>标记，您将获得不确定的进度条，其形式可以是旋转轮或水平栏。

In this mode, the bar only shows cyclic movements and do not provide the exact progress indication. This mode is usually used at the time when the length of the time is not known.

在此模式下，条形图仅显示周期运动，不提供确切的进度指示。通常在时间长度未知时使用此模式。

The other attribute of progress bar, is to specify values of the progress – max and value. In the max attribute, you can specify the amount of work a specific task requires. And, in the value attribute, you can specify the amount of work that has been completed. Here, the browser automatically calculates the percentage of work that has been done and adjust the bar length accordingly.

进度条的另一个属性是指定进度的值-最大和值。在max属性中，您可以指定特定任务所需的工作量。并且，在value属性中，您可以指定已完成的工作量。在这里，浏览器自动计算已完成工作的百分比，并相应地调整钢筋长度。

样式化HTML5进度栏 (Styling the HTML5 Progress Bar)

First of all we will add Candy Stripe look to our html5 progress bar and then we will use jQuery for the animation effect.

首先，我们将在html5进度栏中添加Candy Stripe外观，然后将jQuery用于动画效果。

Giving Candy Stripe Look to The HTML Progress Bar

It’s really easy to get the cool striped effect on your progress bar. All you need is to add some elements along with the layering recurring CSS3 gradient all over it. You can further go on integrating shadow, rounded borders, and padding to give it a dimensional effect.

To get started, we need to set the progress value first. Here, we are setting the progress value around 0.4.
```
<progress value="0.4"></progress>
```
The CSS code for adding the candy stripe look into the candy bar is shown below.

This way, we have achieved a beautiful candy stripe effect on our progress bar. The colors of the candy stripes can be altered either by named colors or the rgba() function.

为Candy Stripe提供HTML进度条外观

在进度条上获得很酷的条纹效果真的很容易。您所需要的只是在其中添加一些元素以及分层重复CSS3渐变。您可以进一步集成阴影，圆角边框和填充以使其具有尺寸效果。

首先，我们需要先设置进度值。在这里，我们将进度值设置为0.4。
```
<progress value="0.4"></progress>
```
下面显示了将糖果条纹外观添加到直方图中CSS代码。

这样，我们在进度条上实现了漂亮的糖果条纹效果。糖果条纹的颜色可以通过命名颜色或rgba()函数进行更改。
Animating the HTML5 Progress Bar
In this section, we will go through the steps of giving the animation effects to the progress bar. As we know that a progress bar move from left to right to show the amount of progress. The idea behind this, is that the progress bar starts from the point 0 and then displays the completion of the process, the moment it reaches to its maximum value.

Below we have provided an HTML structure to start the process. It looks like this:

For CSS, we need to use jQuery to animate the progress bar. You need to insert jQuery like this:
```
<script src="js/jquery.js" type="text/javascript"></script>//OR<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
```
Once you are done, in the next step you need to add scripts to create the expanding properties of the progress bar. First, you are required to store certain elements such as the value of the progress bar, the time frame, and the variables.

Now, we need to create a variable to save animation functions. In the provided example, we have give the name ‘downloading’ to a variable.
```
var downloading=function(){
```
As you have seen that in the above example, we have already set the variable, it’s time set the progress interval inside it. At first, we increase the value by 0.5 per time frame. The value can be increased as per your choice to improve the speed of the progress.

Now, add this value to the progress bar. Like this:
```
addValue=progressbar.val(value);
```
You’ll also need to show the value, located next to the progress bar.

Now, it’s time to run the animation function. The function will be added like this:
```
setInterval(function(){
loading();
},time);
```
Here, we have created animation that is functioning. Here, the value will keep on increasing unless until we don’t specify any limit to stop it. For that we have loading() function like this:

Now, proceed to animate the progress bar like this:
```
$(document).ready(function() {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (300/max)*5,
value = progressbar.val(); var loading = function() {
value += 0.5;
addValue = progressbar.val(value); $('.progress-value').html(value + '%'); if (value == max) {
clearInterval(animate);
}
}; var animate = setInterval(function() {
loading();
}, time);
});
```
Congratulations! The styling of progress bar has been completed now. Below is the sample HTML file and image showing HTML5 progress bar animation output.

HTML5 Progress Bar jQuery Animation Demo

动画化HTML5进度栏

在本节中，我们将逐步完成将动画效果赋予进度条的步骤。众所周知，进度条从左向右移动以显示进度。其背后的想法是，进度条从点0开始，然后在达到最大值时显示过程的完成。

下面，我们提供了一个HTML结构来启动该过程。看起来像这样：
```
<progress id="progressbar"value="0"max="95"></progress>
```
对于CSS，我们需要使用jQuery对进度条进行动画处理。您需要这样插入jQuery：

完成后，在下一步中，您需要添加脚本来创建进度条的扩展属性。首先，您需要存储某些元素，例如进度条的值，时间范围和变量。
```
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
value = progressbar.val(),
time = (300/max)*5;
```
现在，我们需要创建一个变量来保存动画功能。在提供的示例中，我们为变量指定了“下载”名称。

如您所见，在上面的示例中，我们已经设置了变量，是时候在其中设置进度间隔了。首先，我们将每个时间范围的值增加0.5。可以根据您的选择增加该值，以提高进度速度。
```
value+=0.5;
```
现在，将此值添加到进度条。像这样：

您还需要显示进度栏旁边的值。
```
$('.progress-value').html(value+% assigned');
```
现在，该运行动画功能了。该函数将像这样添加：

在这里，我们创建了可运行的动画。在这里，除非我们没有指定任何限制停止它，否则该值将继续增加。为此，我们具有如下的loading（）函数：
```
var loading = function() {
value += 0.5;
addValue = progressbar.val(value);
```
现在，像这样继续制作进度条的动画：

恭喜你！进度栏的样式现已完成。以下是显示HTML5进度条动画输出的示例HTML文件和图像。
```
<!DOCTYPE html>
<html>
<head>
<title>jQuery HTML5 Progress Bar</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script><script type="text/javascript">
$(document).ready(function() {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (300/max)*5,
value = progressbar.val(); var loading = function() {
value += 0.5;
addValue = progressbar.val(value); $('.progress-value').html(value + '%'); if (value == max) {
clearInterval(animate);
}
}; var animate = setInterval(function() {
loading();
}, time);
}); </script><style>
/* setting the dimensions */
progress {
width: 400px;
height: 24px;
display: block;
/* disable defaults */
-webkit-appearance: none;
border: none;
}
/*Styling the background of the progress bar */
progress::-webkit-progress-bar {
background: white;
border-radius: 45px;
padding: 2px;
box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
/* Setting the appearance of the meter */
progress::-webkit-progress-value {
border-radius: 25px;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
background-size: 250px 25px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 75%, rgba(255, 255, 255, .15) 75%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent); </style>
</head>
<body>Simple Progress Bar: <progress value="0.4"></progress><br>Animated Progress Bar: <progress id="progressbar" value="0" max="95"></progress><div class="progress-value"></div></body>
</html>
```
HTML5进度栏jQuery动画演示

That’s all for implementing progress bar using HTML5 and adding cool effects and animations using CSS3 and jQuery.

这就是使用HTML5实现进度栏以及使用CSS3和jQuery添加炫酷效果和动画的全部内容。

About the Author: Samuel Dawson is an expert writer and blogger. He is working for Designs2html Ltd. – a leading markup conversion service company. He has written many research articles on converting HTML to WordPress theme and shared online . He likes sharing insights about WordPress related services.

关于作者 ：Samuel Dawson是一位专家作家和博客。他在Designs2html Ltd工作。 –一家领先的标记转换服务公司。他撰写了许多有关将 HTML 转换为WordPress主题并在线共享的研究文章。他喜欢分享有关WordPress相关服务的见解。

翻译自: https://www.journaldev.com/4823/html5-progress-bar

qt 进度栏