正文 

当前位置： 首页 > 代码 > java教程

进度条的美化(代码片段)

shenpeng shenpeng     2022-12-16     440

关键词：

这里记录一种用css控制进度条美化的效果

css代码：

@-webkit-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-moz-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-ms-keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    


@-o-keyframes progress-bar-stripes 
    from 
        background-position: 0 0
    

    to 
        background-position: 40px 0
    


@keyframes progress-bar-stripes 
    from 
        background-position: 40px 0
    

    to 
        background-position: 0 0
    

.progress 
    display: block;
    width:600px;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#fff5f5f5‘,endColorstr=‘#fff9f9f9‘,GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)


.progress .bar 
    float: left;
    width: 80%;
    height: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top,#149bdf,#0480be);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));
    background-image: -webkit-linear-gradient(top,#149bdf,#0480be);
    background-image: -o-linear-gradient(top,#149bdf,#0480be);
    background-image: linear-gradient(to bottom,#149bdf,#0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ff149bdf‘,endColorstr=‘#ff0480be‘,GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width .6s ease;
    -moz-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease


.progress-striped .bar 
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px


.progress.active .bar 
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite


.progress-danger.progress-striped .bar 
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)

html代码：

<span class="progress progress-danger progress-striped active">
    <span class="bar"></span>
</span>

实现效果：

技术图片

html设计进度条的样式(代码片段)

查看详情

设计进度条(代码片段)

设计进度条这也是我第一次接触到progress这个标签，就是用来设计进度条的，然后进度条还需要我们后期进行设计，才能让原本的蓝灰配变得更加“灵动”一些哈！最简单的进度条，源码是这样的：<progressid="pro"value="30"></p... 查看详情

第七章文本进度条的实现(代码片段)

文本进度条大家都见过程加载的时候的文本进度条进度条的原理是什么呢？1、采用字符串方式打印可以动态变化的文本进度条2、进度条需要能在一行中逐渐变化问题分析：如何获取一个文本进度条的变化时间呢？1、采用sleep()... 查看详情

进度条与拖动条的使用学习(代码片段)

（一）进度条常用属性详解：android:max：进度条的最大值android:progress：进度条已完成进度值android:progressDrawable：设置轨道对应的Drawable对象android:indeterminate：如果设置成true，则进度条不精确显示进度android:indeterminateDrawable：设置... 查看详情

[winfrom]下载文件并显示进度条的实现代码(代码片段)

...径，点击下载按钮进行下载，下载过程显示下载百分比和进度条。窗体：组件labelTextBoxButtonprogressBarsaveFileDialog获取saveFileDialog1文件名和路径Path.GetDirectoryName(saveFileDialog1.FileName)//获取文件名(不包括路径)P 查看详情

在vue项目中使用进度条的实现(代码片段)

下载npminstallnprogress--save 基本用法Nprogress.start()Nprogress.start().done() （我在拦截器直接引入）importaxiosfrom'axios'importstorefrom"../store/index"//引入nprogressimportNprogressfrom 查看详情

progress进度条的样式修改(代码片段)

由于公司在做的公众号上需要进度条，我就想着用progress标签，可是progress标签很难修改样式，因而在网上查询了一番。现在总结一下。progress是H5新标签，主要用于显示进度条。由于他是H5新标签，因而它存在一些兼容问题。看... 查看详情

带有进度条的圆周率计算(代码片段)

#带有进度条的圆周率计算 1importtime2m=1003pi=04foriinrange(m):5a=‘*‘*i6b=‘.‘*(m-i)7c=((i+1)/m)*1008print(":<3.0f%[->]".format(c,a,b),end=‘‘)9time.sleep(0.05)10pi=pi+1/pow(16,i)*(4/(8*i+1)-2/(8*i+4)-1/(8*i+5)-1/(8*i+6))11print("")12print(pi)   查看详情

androidseekbar使用(代码片段)

...gressBar的一个子类，如：音乐播放、音量条、播放进度条等。效果图：二、常用属性和方法属性名含义progress设置该进度条的最大值progressDrawable自定义drawable显示secondaryProgress定义二级进度值，值介于0到max。该进度... 查看详情

带进度条的圆周率计算(代码片段)

importrandomimportmathimporttimen=pow(10,7)m=0.0print("执行开始".center(20,‘-‘))foriinrange(1,n+1):a=‘*‘*ib=‘.‘*ic=(i/n)*100x,y=random.random(),random.random()s=math.sqrt(x**2+y**2)print("进度::^3.0f%[->]".format(c,a,b))ifs<=1.0:m+=1pi=4*(m/n)print("".format(pi))  查看详情

活动到片段方法调用带有进度条的线程(代码片段)

我正在使用此代码，一切正常，但进度条没有显示。我想在方法实现期间阻止我的ui并想显示进度条。我想获得像progressDialog这样的行为。这是我的方法publicvoideffct(inteffectNo)finalintfinalEffectNO=effectNo;getWindow().setFlags(WindowManager.LayoutP... 查看详情

jqueryui组件progressbar进度条的简单使用(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>datepickers</title><metacharset="utf-8"><linkrel="stylesheet"href="http://code.jquery.com/ui 查看详情

有进度条的圆周率计算(代码片段)

fromrandomimportrandomfromtimeimportperf_counterfromtqdmimporttqdmimporttimeforiintqdm(range(100)):time.sleep(0.1)print("")DARTS=1000*1000hits=0.0start=perf_counter()foriinrange(1,DARTS+1):x,y=random(),random()dist=pow(x**2+y**2,0.5)ifdist<=1.0:hits=hits+1pi=4*(hits/DARTS)print("圆周率值是:"... 查看详情

渐变色进度条的两种绘制方案(代码片段)

在App开发中经常会用到渐变色进度条控件，而自定义进度条的实现也不难，下面提供了两种渐变色进度条的实现方案。 效果图如下： 第一种实现方案：使用图层layer实现层级结构如图所示： 构建过程如下： 1.创... 查看详情

进度条的显示(代码片段)

...1.apk‘)urllib.urlretrieve(url,local,Schedule)demo01 demo02:我们对进度条的需求：一是进度信息在一行中显示；二是每次都能够动态擦除一行中上一次的内容。那么很自然的想到print有没有相应的转义符，还真有这么一个，””。importtime... 查看详情

带进度条的tkinter链接按钮(代码片段)

...er创建一个cookieclicker应用程序。我想在我的程序中有一个进度条，每次点击cookie100次就会填满。我使用importttk创建了进度条，但是每当按下按钮时我都不知道如何更新进度条。到目前为止，这是我的代码：fromTkinterimport*fromTkinteri... 查看详情

一个kvo实现wkwebview加载进度条的例子（注意最后移除观察者）(代码片段)

////OpenWebViewController.m//Treasure////Createdby蓝蓝色信子on16/7/29.//Copyright?2016年GY.Allrightsreserved.//#import"ZTOpenWebViewController.h"#import<WebKit/WebKit.h>@interfaceZTOpenWebViewControll 查看详情

c_cpp进度条的一个漂亮的小可自定义视图，具有可选的动画属性(代码片段)

查看详情