如何用纯CSS3制作进度条

Posted 2023-04-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用纯CSS3制作进度条相关的知识，希望对你有一定的参考价值。

1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。

2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill 和.bar-fill的span标签。

<div class="container">
<div class="title plain">Plain</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>

3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。

.container
width:30%;
margin:0 auto

.title
background:#545965;
color:#fff;
padding:15px;
float:left;
position:relative;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px

4.首先建一个白色的背景

.bar-unfill height:15px;display:block;background:#fff;width:100%;border-radius:8px

5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。

.bar-fill
height:15px;
display:block;
background:#45c9a5;
width:0;
border-radius:8px;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite

6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。

@-webkit-keyframes progressbar
from
width:0

to
width:100%

/* Standard syntax */
@keyframes progressbar
from
width:0

to
width:100%

7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：

.bar-fill-stripes
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite

追踪

<div class="container">
<div class="title">Tracker</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill-tracker"></span>
<span class="track-wrap">
<span class="track"></span>
</span>
</span>
</div>
</div>

8.最后产生动画效果

.track-wrap
position:relative;
top:-18px;
-webkit-animation:progressbar2 7s infinite;
animation:progressbar2 7s infinite

.track
height:20px;
display:block;
background:#e74c3c;
width:20px;
border-radius:10px;
position:relative;
left:-12px

@-webkit-keyframes progressbar2
from
left:0

to
left:100%

/* Standard syntax */
@keyframes progressbar2
from
left:0

to
left:100%

参考技术A 看看这个教程
http://www.w3cplus.com/css3/how-to-create-a-css3-progress-bar.html
使用纯CSS创建一个有平面动画效果的进度条本回答被提问者采纳

我如何用 pafy 为进度条制作线程

【中文标题】我如何用 pafy 为进度条制作线程【英文标题】：how i can make thread for progress bar with pafy 【发布时间】：2019-01-04 14:55:11 【问题描述】：

我正在尝试解决我的程序中的问题，这个问题是当我开始下载视频时，程序没有响应，我也看不到进度条移动，所以我尝试使用线程模块，但我无法解决问题所以我该如何解决问题

通过此代码，我可以下载视频并将数据发送到另一个函数，以检索我用来将其连接到进度条的信息

def video(self):
    video_url = self.lineEdit_4.text()
    video_save = self.lineEdit_3.text()

    pafy_video = pafy.new(video_url)
    type_video = pafy_video.videostreams

    quality = self.comboBox.currentIndex()

    start_download = type_video[quality].download(filepath=video_save,callback=self.video_progressbar)

此代码是从视频功能接收信息以连接进度条

def video_progressbar(self,total, recvd, ratio, rate, eta):
    self.progressBar_2.setValue(ratio * 100)

我用;python3.5 pyqt5 pafy

【问题讨论】：

【参考方案1】：

移动到另一个线程的一种方法是创建一个位于另一个线程中的QObject，并在一个槽中执行该任务。并且该槽必须通过QMetaObject::invokeMethod 或信号调用。

`with QThread and QMetaObject::invokeMethod:`

import pafy
from PyQt5 import QtCore, QtWidgets

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        central_widget = QtWidgets.QWidget()
        self.setCentralWidget(central_widget)

        self.le_url = QtWidgets.QLineEdit("https://www.youtube.com/watch?v=bMt47wvK6u0")
        path = QtCore.QStandardPaths.writableLocation(QtCore.QStandardPaths.DownloadLocation)
        self.le_output = QtWidgets.QLineEdit(path)
        self.btn_quality = QtWidgets.QPushButton("Get qualities")
        self.combo_quality = QtWidgets.QComboBox()
        self.btn_download = QtWidgets.QPushButton("Download")
        self.progressbar = QtWidgets.QProgressBar(maximum=100)

        self.downloader = DownLoader()
        thread = QtCore.QThread(self)
        thread.start()
        self.downloader.moveToThread(thread)

        self.btn_quality.clicked.connect(self.on_clicked_quality)
        self.btn_download.clicked.connect(self.download)
        self.btn_download.setDisabled(True)
        self.downloader.progressChanged.connect(self.progressbar.setValue)
        self.downloader.qualitiesChanged.connect(self.update_qualityes)
        self.downloader.finished.connect(self.on_finished)

        form_lay = QtWidgets.QFormLayout(central_widget)
        form_lay.addRow("Url: ", self.le_url)
        form_lay.addRow(self.btn_quality)
        form_lay.addRow("qualities: ", self.combo_quality)
        form_lay.addRow("Output: ", self.le_output) 
        form_lay.addRow(self.btn_download)  
        form_lay.addRow(self.progressbar)

    @QtCore.pyqtSlot()
    def on_finished(self):
        self.update_disables(False)

    @QtCore.pyqtSlot()
    def on_clicked_quality(self):
        video_url = self.le_url.text()
        QtCore.QMetaObject.invokeMethod(self.downloader, "get_qualities",
            QtCore.Qt.QueuedConnection,
            QtCore.Q_ARG(str, video_url))

    @QtCore.pyqtSlot(list)
    def update_qualityes(self, types_of_video):
        for t in types_of_video:
            self.combo_quality.addItem(str(t), t)
        self.btn_download.setDisabled(False)

    @QtCore.pyqtSlot()
    def download(self):
        video_save = self.le_output.text()
        d = self.combo_quality.currentData()
        QtCore.QMetaObject.invokeMethod(self.downloader, "start_download",
            QtCore.Qt.QueuedConnection,
            QtCore.Q_ARG(object, d),
            QtCore.Q_ARG(str, video_save))
        self.update_disables(True)

    def update_disables(self, state):
        self.combo_quality.setDisabled(state)
        self.btn_quality.setDisabled(state)
        self.le_output.setDisabled(state)
        self.le_url.setDisabled(state)
        self.btn_download.setDisabled(not state)

class DownLoader(QtCore.QObject):
    progressChanged = QtCore.pyqtSignal(int)
    qualitiesChanged = QtCore.pyqtSignal(list)
    finished = QtCore.pyqtSignal()

    @QtCore.pyqtSlot(str)
    def get_qualities(self, video_url):
        pafy_video = pafy.new(video_url)
        types_of_video = pafy_video.allstreams # videostreams
        self.qualitiesChanged.emit(types_of_video)

    @QtCore.pyqtSlot(object, str)
    def start_download(self, d, filepath):
        d.download(filepath=filepath, callback=self.callback)

    def callback(self, total, recvd, ratio, rate, eta):
        val = int(ratio * 100)
        self.progressChanged.emit(val)
        if val == 100:
            self.finished.emit()

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.resize(320, 480)
    w.show()
    sys.exit(app.exec_())

`with threading.Thread`:

import pafy
import threading
from PyQt5 import QtCore, QtWidgets

class MainWindow(QtWidgets.QMainWindow):
    qualitiesChanged = QtCore.pyqtSignal(list)
    progressChanged = QtCore.pyqtSignal(int)
    finished = QtCore.pyqtSignal()

    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        central_widget = QtWidgets.QWidget()
        self.setCentralWidget(central_widget)

        self.le_url = QtWidgets.QLineEdit("https://www.youtube.com/watch?v=bMt47wvK6u0")
        path = QtCore.QStandardPaths.writableLocation(QtCore.QStandardPaths.DownloadLocation)
        self.le_output = QtWidgets.QLineEdit(path)
        self.btn_quality = QtWidgets.QPushButton("Get qualities")
        self.combo_quality = QtWidgets.QComboBox()
        self.btn_download = QtWidgets.QPushButton("Download")
        self.progressbar = QtWidgets.QProgressBar(maximum=100)

        self.btn_quality.clicked.connect(self.on_clicked_quality)
        self.btn_download.clicked.connect(self.download)
        self.btn_download.setDisabled(True)
        self.progressChanged.connect(self.progressbar.setValue)
        self.qualitiesChanged.connect(self.update_qualityes)
        self.finished.connect(self.on_finished)

        form_lay = QtWidgets.QFormLayout(central_widget)
        form_lay.addRow("Url: ", self.le_url)
        form_lay.addRow(self.btn_quality)
        form_lay.addRow("qualities: ", self.combo_quality)
        form_lay.addRow("Output: ", self.le_output) 
        form_lay.addRow(self.btn_download)  
        form_lay.addRow(self.progressbar)

    @QtCore.pyqtSlot()
    def on_finished(self):
        self.update_disables(False)

    @QtCore.pyqtSlot()
    def on_clicked_quality(self):
        video_url = self.le_url.text()
        threading.Thread(target=self.get_qualities, args=(video_url,)).start()

    def get_qualities(self, video_url):
        pafy_video = pafy.new(video_url)
        types_of_video = pafy_video.allstreams # videostreams
        self.qualitiesChanged.emit(types_of_video)

    @QtCore.pyqtSlot(list)
    def update_qualityes(self, types_of_video):
        for t in types_of_video:
            self.combo_quality.addItem(str(t), t)
        self.btn_download.setDisabled(False)

    @QtCore.pyqtSlot()
    def download(self):
        video_save = self.le_output.text()
        d = self.combo_quality.currentData()
        threading.Thread(target=d.download, kwargs='filepath': video_save, 'callback': self.callback, daemon=True).start()

    def callback(self, total, recvd, ratio, rate, eta):
        print(ratio)
        val = int(ratio * 100)
        self.progressChanged.emit(val)
        if val == 100:
            self.finished.emit()

    def update_disables(self, state):
        self.combo_quality.setDisabled(state)
        self.btn_quality.setDisabled(state)
        self.le_output.setDisabled(state)
        self.le_url.setDisabled(state)
        self.btn_download.setDisabled(not state)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    w = MainWindow()
    w.resize(320, 480)
    w.show()
    sys.exit(app.exec_())

【讨论】：

感谢您的代码运行良好，但我的代码无法使用 qthread，我使用的是 QmainWindow 因为我理解你是50%的代码所以我尝试使用qthread，并没有成功解决无响应问题你刚换了课我会把我的代码交给你解决我的问题，并将 qthread 放在正确的位置谢谢你，我再次尝试阅读你的代码，我现在明白了如何使用线程

以上是关于如何用纯CSS3制作进度条的主要内容，如果未能解决你的问题，请参考以下文章

我如何用 pafy 为进度条制作线程

如何用jquery制作进度条？

Web前沿技术纯 CSS3 打造的10个精美加载进度条动画

html5 css3 怎么制作简单的进度条

在Linux操作系统的纯命令行界面，如rpm -ivh或者scp这些命令使用时会出现进度条和百分比，如何用shell实现

详解用CSS3制作圆形滚动进度条动画效果

如何用纯CSS3制作进度条

我如何用 pafy 为进度条制作线程

with QThread and QMetaObject::invokeMethod:

with threading.Thread:

`with QThread and QMetaObject::invokeMethod:`

`with threading.Thread`: