学习使用CSS制作进度条

iefreer 发表于 2016-10-07 16:24:23

标签: css3, progress, bar

- +

进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。

本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:

下载.png

直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。

外部目标范围元素的CSS代码编写如下:

.pb-scope {  
    display: inline-block;  
    width: 100px;  
    height: 20px;  
    padding: 2px;  
    border: 4px solid #A157FC;  
    border-top-left-radius: 10% 50%;  
    border-top-right-radius: 10% 50%;  
    border-bottom-left-radius: 10% 50%;  
    border-bottom-right-radius: 10% 50%;  
}

内部条形元素边界的弧度需要和外部范围元素的保持一致,可以使用继承的方式:

.pb-scope .pb-bar {  
    display: block;  
    width: 70%;  
    height: 100%;  
    border-radius: inherit;  
    background: #A157FC;  
}

上述border-radius属性使用inherit值,以保持和其父样式类相同的半径。

具体使用时的HTML代码示例如下:

<span class="pb-glass">
    <span class="pb-bar"></span>
</span>

如果需要显示进度条动画,只要给内部bar元素添加animation即可。

一个完整的在线实例可以访问:http://wow.techbrood.com/fiddle/17885


possitive(0) negative(0) views3487 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • 常见面试题JS语言中四种函数调用方式实例讲解

    JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • S3TC(S3 Texture Compression)纹理压缩格式详解

    使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • D3.js读取外部json数据

    D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...