如何用HTML5制作进度条方法教程

进度条是指网络上文件、上传下载与浏览网页的可视化显示条。用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧

操作方法

  • 01

    先在<body>标签里面嵌入一个<progress>标签,max最大值设置为100,value为20,运行程序,结果如图

  • 02

    运行程序,结果如图

  • 03

    用CSS样式为<progress>标签设置大小,代码如下图3 运行程序,结果如图

  • 04

    运行程序,结果如图

  • 05

    看上面的运行结果,在CSS样式里面设置了背景颜色为红色,程序显示并无变化,原因是HTML5与各浏览器的兼容性各不相同,那如何来改变兼容性问呢?下面以谷歌浏览器为例: 在CSS样式表增加一组progress::-webkit-process-value{}样式,背景颜色为红色,如图

  • 06

    运行程序,看下结果与前面的有什么不同?

  • 07

    除了改变滑块以后,我们还可以改进整个进度条样式,代码如下图

  • 08

    最后运行程序,就能得到基础的内存条样式了。

  • 09

    用图片做背景,可以让进度条更华丽。

(0)

相关推荐

  • PPT制作进度条效果的方法

    PPT制作进度条效果的方法 问题分析 用PPT制作进度条,相信难点在于数字的跳动和进度条的同步.教程中假设数字从10到100(间隔为10的倍数),每个数字跳动时间为0.1秒,10个数字时间共1秒,与此 ...

  • axure怎么制作进度条的效果? axure进度条的制作方法

    Auxre种族网页原型很方便,今天我们就来看看使用axure制作常见的进度条的教程. 1.首先打开Axure,新建一个空白页面,在工作区域内拖入本次要使用的各个元件,如下图所示. 2.然后对各个元件的 ...

  • wps演示如何制作进度条动画

    wps演示制作进度条动画的方法 先将背景设置成黑色. 然后插入圆角矩形,用纹理填充,调整圆角的大小. 复制圆角矩形,缩小,填充为渐变色. 为纹理圆角矩形添加内部阴影,复制渐变色圆角矩形,同样填充纹理, ...

  • 怎么用PS的时间轴制作进度条?

    怎么用PS的时间轴制作进度条?下, 小编告诉大家.具体如下:1.我们首先打开电脑中的PS ,新建.2.我们复制背景图层.注意,当我们创建剪贴版后一定要打开时间轴的窗口.3. 当我们创建视频的时候时间轴 ...

  • 如何在Excel表格中制作进度条样式的图表

    我们在用excel表格处理数据的时候,经常会遇到需要添加图表的情况,今天就跟大家介绍一下如何在Excel表格中制作进度条样式的图表的具体操作步骤.1. 打开电脑,双击桌面上的excel表格.2. 如图 ...

  • 三星手机设置二级字体和修改进度条颜色教程

    最简单的三星手机设置二级字体颜色和修改进度条颜色教程,个性随手拈来,还等什么呢?快来装饰您的爱机吧,超级简单! 操作方法 01 提取framework-res.apk,反编辑找到res\\zzz_tw ...

  • 如何用Bootstrap制作导航条

    Bootstrap作为目前比较流行的前端框架,它给我们开发页面提供了便捷.下面小编给大家介绍一下如何用Bootstrap制作导航条 操作方法 01 首先我们需要搭建一个html页面,如下图所示,在页面 ...

  • Premiere怎么制作进度条动画?

    Premiere中想要制作一个动画进度的效果,该怎么制作呢?下面我们就来看看详细的教程. 1.打开pr,在上方找到“字幕”-“新建字幕”-“默认静态字幕”,修改“名称”为进度条-“确定” 2.在打开的 ...

  • 如何用飞信制作视频的方法步骤介绍

    飞信(英语:Fetion)是中国移动推出的“综合通信服务”,实现互联网和移动网间的无缝通信服务。在这款应用中有个十分重要的功能相信大家一定会非常喜欢,那就是可以拍摄视频与自己的亲朋好友分享,但是怎么使 ...