`

CSS进度条显示

    博客分类：
  • CSS
CSSChrome.netHTML 
阅读更多 
<html>
<head>
<style type="text/css">
.schedule{ 
background: url(http://assets.dj10.net/images/chrome/proportion.gif)  repeat-x scroll left center transparent; 
width:80px;
height: 11px;
font-size:0;

}
.mine{
 background: url(http://assets.dj10.net/images/chrome/proportion.gif) repeat-x scroll left bottom transparent;
 width: 50%; /*进度条控制*/
height: 11px;

}


</style>
</head>

<body>
  <div class="schedule">
     <span class="mine"></span>
  </div>
</body>

</html>

 

分享到：
| 什么叫n+1次select查询问题?
评论
1 楼 cwj158 2011-11-06  
我用的是IE8，以上代码运行时没有效果。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3相册图片加载进度条效果，加载图片过程中在页面顶部出现蓝色的进度条，右上角有不停转动的loading效果

    1. 创建HTML结构：设置一个用于显示进度条的div元素，并在其内部包含一个代表进度的子元素。例如： ```html &lt;div class="progress"&gt;&lt;/div&gt; ``` 2. 使用CSS定义样式：为进度条和进度元素添加背景颜色，边框，以及...

    css3进度条

    CSS3进度条是用于显示任务完成度或数据加载状态的一种可视化元素，它能够以优雅的方式反馈给用户某个过程的进度。在本主题中，我们将深入探讨如何使用CSS3创建动画效果的进度条，并理解其背后的代码逻辑。 首先，...

    div+css进度条完美解决方案

    总结一下，这个"div+css进度条完美解决方案"主要包括以下步骤： 1. 使用HTML的`div`元素构建进度条的基本结构。 2. 通过CSS定义进度条的样式，包括颜色、尺寸等。 3. Java后端（Servlet）处理数据，计算进度，并将...

    纯CSS3时尚进度条UI设计效果

    本教程将深入探讨如何利用纯CSS3来创建一款时尚的进度条UI设计，使你的网站在视觉上更具吸引力。 首先，CSS3是层叠样式表的第三个主要版本，它引入了许多新的特性和功能，如选择器、过渡、动画、多列布局等，使得...

    纯CSS3进度条

    例如，我们可以调整进度条的宽度和高度，使其在手机和平板设备上保持良好显示。 总的来说，纯CSS3进度条提供了一种无需依赖JavaScript的解决方案，它允许设计师创建具有视觉吸引力和动态效果的进度条。通过掌握CSS3...

    js+css编写进度条的实例

    在Web开发中，进度条是常用的一种UI元素，用于显示任务完成的状态。通过使用JavaScript（简称JS）与Cascading Style Sheets（层叠样式表，简称CSS），我们可以创建出功能丰富且视觉效果良好的进度条。下面将详细介绍...

    html+js+css进度条

    在本主题"html+js+css进度条"中，我们将深入探讨如何利用原生JavaScript、HTML和CSS来创建具有交互性的进度条。下面将详细阐述这三种技术如何协同工作以实现这一功能。 首先，HTML是构建网页结构的基础。为了创建一...

    jquery css3进度条加载动画特效

    标题中的“jQuery CSS3进度条加载动画特效”指的是利用JavaScript库jQuery和CSS3技术来创建一种视觉效果，即在网页内容加载时显示的进度条。这种特效可以提供用户反馈，表明页面正在加载，并且增加了用户体验的互动...

    CSS3彩色进度条 按百分比显示不同颜色.zip

    在本压缩包文件中，`CSS3彩色进度条 按百分比显示不同颜色.zip` 提供了一个实现这一功能的示例。这个示例通过CSS3技术，实现了进度条在不同百分比阶段显示不同颜色的效果，从而增加了视觉吸引力和交互性。 首先，...

    多款进度条 显示百分比

    进度条通常由HTML元素（如`&lt;div&gt;`）组成，通过CSS进行样式定义，然后通过JavaScript或jQuery来控制其填充程度，从而反映任务的进度。百分比显示则通常是通过JavaScript计算并更新在进度条旁边的文字或者元素中。 ...

    动态css进度条（闪烁跳动的进度条）特效代码

    动态CSS进度条是一种常见且吸引用户的界面元素，它通常用于显示任务或数据加载的进度，如文件上传、视频缓冲或网络请求。在这个示例中，我们关注的是如何使用CSS来创建一个闪烁跳动的进度条效果，这可以增强用户体验...

    css多种颜色的进度条

    总结来说，通过结合HTML、CSS3和JavaScript，我们可以创建出具有动态颜色渐变和百分比显示的进度条。这个过程中，CSS3的渐变、伪元素、动画和响应式设计等特性发挥了关键作用。通过深入理解这些知识点，开发者可以...

    （常用代码）CSS3 进度条效果的实现

    在网页设计中，进度条是一种常见的用户界面元素，用于显示任务的完成状态或者加载过程。随着CSS3的引入，我们可以通过纯CSS来实现各种美观且动态的进度条效果，而无需依赖JavaScript或者其他复杂的库。本篇文章将...

    10款CSS3进度条Loading动画.zip

    本资源“10款CSS3进度条Loading动画.zip”聚焦于利用CSS3技术来实现富有创意和独特动画效果的加载进度条。这些加载条在网页加载内容时为用户提供反馈，展示数据加载的进度，既实用又美观。 1. **CSS3概述**：CSS3是...

    js圆形进度条css圆形进度条.zip

    "js圆形进度条css圆形进度条.zip"是一个压缩包，包含了实现圆形进度条效果的资源，适用于JavaScript（js）和CSS（css）技术。这个圆形进度条设计允许用户自定义样式，并且具有良好的浏览器兼容性，支持IE8及以上版本...

    使用svg模式制作的Css进度条

    在网页设计中，进度条是一种常见的用户界面元素，用于显示任务的完成状态或者加载过程。在本主题中，我们将深入探讨如何使用SVG（Scalable Vector Graphics）模式和CSS（Cascading Style Sheets）来创建自定义的、...

    css3动画进度条

    在网页设计中，进度条是一种常见的用户界面元素，用于显示任务、数据加载或任何需要时间完成过程的进度。CSS3（层叠样式表第三版）引入了许多新的特性和功能，其中包括丰富的动画效果，使得创建动态、吸引人的进度条...

    CSS3实现圆形进度条

    在Web开发中，进度条是一种常见的用户界面元素，用于显示任务或过程的完成程度。传统的进度条多为水平或垂直条状，但随着CSS3特性的不断发展，设计师们开始探索更具有创意的展现方式，其中之一就是圆形进度条。本文...

    CSS3彩色进度条加载动画_CSS3_动画特效_

    本主题聚焦于“CSS3彩色进度条加载动画”，这是一种能够显示数据加载过程的视觉反馈，同时带有进度百分比显示，增强了用户体验。 **CSS3彩色进度条的基本结构** 一个基本的进度条通常由HTML结构和CSS样式两部分...

    html5 css3圆形进度条倒计时页面跳转代码

    在进度条的实现中，可能会用到`&lt;div&gt;`元素来定义进度条容器，以及可能的`&lt;span&gt;`或`&lt;time&gt;`元素来显示倒计时时间。 接着，CSS3引入了大量新的选择器和样式属性，使设计更加精细和灵活。在创建圆形进度条时，可以...

Magicbox
Global site tag (gtag.js) - Google Analytics