进度条漂亮样式代码（好看的进度条符号）

今天给各位分享进度条漂亮样式代码的知识，其中也会对好看的进度条符号进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何用纯CSS编写一个实用的进度条
• 2、自定义进度条之样式篇
• 3、VB 这样的进度条样式怎么做？

如何用纯CSS编写一个实用的进度条

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

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

和.bar-fill的span标签。

Plain

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

}

追踪

Tracker

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%

}

自定义进度条之样式篇

1.1 系统是默认样式有

style="@style/Widget.AppCompat.ProgressBar" 圆形进度条

style="@style/Widget.AppCompat.ProgressBar.Horizontal" 水平进度条

1.2 自定义样式

一般我们不会使用系统自带的样式，比如进度的颜色，进度条的高度，等等简单的修改。这时候我们只需要改动一下样式，就可以达到目的。

在res/values/styles里边新建

然后再ProgressBar中引用我们自定义的样式就可以了。

update_progress_horizontal 其中的 android:progressDrawable 我们可以自己定义进度条的颜色。在res/drawable下新建progress_indeterminate_horizontal文件（layer-list类型的）

VB 这样的进度条样式怎么做？

靠

一、实现原理

采用一个完整的图片来作为进度条，每次当进度条改变时，采用先贴图再用背景色擦去不需显示的一段进度的方法来实现进度条的变化，可实现制作任何复杂美观的进度条。

二、准备工作

首先需准备一个如下图样式的进度条图片（当然你可以做你自己喜欢的样式）。然后在窗体中加入一PictureBox控件，属性设置如下：

AutoSize：True

Appearance：Falt

AutoRedraw：True

ScaleMode: Pixel

Picture：〃准备的图片〃

再加一辅助控件（只用于保存图片，方便快捷地使用进度条）Image，属性设置如下：

Picture：〃准备的图片〃

Visible：FALSE

进度条的用途:

※在一般软件中表示执行进度

※在多媒体播放器中表示音量大小、频率节奏的变化…

※在游戏中表示角色的能量、生命值…

进度条的分类:

由以上用途可知,进度条大体可分为两类

第一类：自动变化的进度条（如安装程序中的进度条）

第二类：可由用户操作的进度条（如音量调节）

以下是两类进度条的代码。

实现第一类的方法：

Const MaxValue = 100

Const MinValue = 0

Dim Gene As Single

Dim ProValue As Single

Sub InitData()

Gene = Picture1.ScaleWidth / (MaxValue － MinValue)

End Sub

Sub SetProBar(value As Single)

Dim X As Single

ProValue = value

If ProValue MaxValue Then

ProValue = MaxValue

Else

If ProValue MinValue Then

ProValue = MinValue

End If

End If

Text1.Text = ProValue

X = (ProValue － MinValue) ＊ Gene

With Picture1

Picture1.Picture = Image1.Picture

Picture1.Line (X, 0)－(.ScaleWidth, .ScaleHeight), vbWhite, BF

End With

End Sub

以上是实现第一类进度条的全部代码，它有相当的独立性，不管你准备的进度条有多长，此代码都可无须改变而应用于你的系统中。其中，MAXVALUE、MINVALUE为此进度条所表示的最大最小值，可由实际应用而定。

PROVALUE 为当前的进度值，可由它得到当前值，以便处理。

SETPROBAR 为实际使用的过程，在软件中通过调用此过程来改变进度条的长度。VALUE 的取值为 MINVALUE～MAXVALUEINITDATA 是初始化进度条长度和实际要表示的范围的比例因子，在软件中首先要调用此过程完成初始化工作。

第二类实现方法：

要实现此类进度条，只需在第一类的基础上再加上响应用户操作的部分即可

具体所加代码如下：

Private Sub picture1_MouseMove(Button As Integer, Shift As Integer, X As Single,Y As Single)

If Button = 1 Then

Picture1_MouseDown Button, Shift, X, Y

End If

End Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single,Y As Single)

If Button = 1 Then

ProValue = Int(X / Gene ＋ MinValue ＋ 1)

SetProBar ProValue

End If

End Sub

应用示例：

建一工程，然后加入下列控件，并写入所示代码即可。

控件：两个PictureBox，组成控件数组（属性设置如上）但：picture1(0)的BorderStyle:None

两个Label，组成控件数组并分别以与自已Index 值相同的PictureBox为父控件（只需把Label绘在或粘贴在相应的PictureBox上即可）属性：

AutoSize：True

Alignment：Center

BackStyle：Transparent

Label（1）： Caption：〃当前音量0〃

Enabled：False

Label（0）： Caption：〃0％〃

一个Timer:属性：Interval：50

三、实例

一个自动的进度条和由用户控制的进度条。

Option Explicit

′如果有多个进度条且表示值的范围不同

′则可设立一组范围值，最好能通过INDEX

′值同自已的进度条建立对应关系，以方便处理

Const MaxValue = 100

Const MinValue = 0

Dim Gene As Single

Dim ProValue(1) As Single

′生成比例因子，必须首先执行

Sub InitData()

Gene = Picture1(0).ScaleWidth /

(MaxValue － MinValue)

End Sub

′根据当前进度值设置进度条，INDEX指出是哪个进度条的值

Sub SetProBar(value As Single, Index As Integer)

Dim X As Single

Dim BkColor As Long

ProValue(Index) = value

′对当前进度值超出范围的处理

If ProValue(Index) MaxValue Then

ProValue(Index) = MaxValue

Else

If ProValue(Index) MinValue Then

ProValue(Index) = MinValue

End If

End If

′在存在多个进度条时分别设置各进度条的不同文本

Select Case Index

Case 1

Label1(Index).Caption = ProValue(Index) ＆ 〃％〃

Case 0

Label1(Index).Caption = 〃当前音量〃 ＆ ProValue(Index)

End Select

′计算出当前进度值所对应的进度条位置

X = (ProValue(Index) － MinValue) ＊ Gene

With Picture1(Index).Picture = Image1.Picture

′把当前进度值所对应的进度条位置之后的图片用白色盖住

′它是此法实现思路的核心

Select Case Index

Case 1

bkcolor = vbWhite

Case 0

bkcolor = vbMenuBar

End Select

Picture1(Index).Line (X, 0)－(.ScaleWidth, _ .ScaleHeight), bkcolor, BF

End With

End Sub

′首先初始化比例因子

Private Sub Form_Load()

InitData

End Sub

′在用户操作INDEX为0的进度条时的响应

Private Sub picture1_MouseMove(Index As Integer, _

Button As Integer, Shift As Integer, X As Single, Y As Single)

If Button = 1 And Index = 0 Then

Picture1_MouseDown Index, Button, Shift, X, Y

End If

End Sub

′根据当前鼠标坐标的X值（进度条若为纵向则使用Y值）

′计算出所对应的当前进度值，然后设置进度条

Private Sub Picture1_MouseDown(Index As Integer, _

Button As Integer, Shift As Integer, X As Single, Y As Single)

If Button = 1 And Index = 0 Then

ProValue(Index) = Int(X / Gene ＋ MinValue ＋ 1)

SetProBar ProValue(Index), Index

End If

End Sub

′在演示中以定时器定时设置进度

′实际使用时当然是按事件完成的

′百分比来设置进度

Private Sub Timer1_Timer()

Static curval As Single

SetProBar curval, 1

curval = (curval ＋ 1) Mod MaxValue

If curval = 0 Then

curval = MinValue

End If

End Sub

进度条漂亮样式代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于好看的进度条符号、进度条漂亮样式代码的信息别忘了在本站进行查找喔。