css横向进度条

最新推荐文章于 2024-07-19 15:32:49 发布
最新推荐文章于 2024-07-19 15:32:49 发布
阅读量247 收藏
点赞数
原文链接：https://my.oschina.net/zoujinxia/blog/883257
版权

效果图：

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进度条</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <section class="container">
        <input type="radio" class="radio" name="progress" id="five">
        <label for="five" class="label">5%</label>

        <input type="radio" class="radio" name="progress" id="twentyfive" checked>
        <label for="twentyfive" class="label">25%</label>

        <input type="radio" class="radio" name="progress" id="fifty">
        <label for="fifty" class="label">50%</label>

        <input type="radio" class="radio" name="progress" id="seventyfive">
        <label for="seventyfive" class="label">75%</label>

        <input type="radio" class="radio" name="progress" id="onehundred">
        <label for="onehundred" class="label">100%</label>

        <div class="progress">
            <div class="progress-bar"></div>
            <div class="dd">
                <span>迭代一</span>
                <span>迭代一</span>
                <span>迭代一</span>
            </div>
        </div>
    </section>
</body>

</html>

style.css:

body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
}

.container {
  margin: 80px auto;
  width: 900px;
  text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 800px;
  background: lightgray;
}

.progress-bar {
  position: relative;
  height: 100px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  /*-webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;*/
  /*-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);*/
}
.dd {
  margin-top:-30px;font-size: 25px; float: left;font-weight: bold;
}
.dd span {
 margin-left: 140px;
}
#five:checked ~ .progress > .progress-bar {
  width: 5%;
  background-color:rgb(148,0,211);
  opacity: 0.7;
  filter:alpha(opacity=20);
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color:rgb(153,50,204);
  opacity: 0.7;
  filter:alpha(opacity=20);
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color:rgb(188,85,211);
  opacity: 0.7;
  filter:alpha(opacity=20);
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color:rgb(218,112,214);
  opacity: 0.7;
  filter:alpha(opacity=20);
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color:rgb(221,160,221);
  opacity: 0.7;
  filter:alpha(opacity=20);
}

/*.radio {
  display: none;
}*/

 

转载于:https://my.oschina.net/zoujinxia/blog/883257

choucha5981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css动态进度条-css制作进度条生长动画效果
yh8899abc的博客
09-30 1947
1、HTML部分 <div class="line" v-for="(item, index) in originData" :key="index"> <div class="progress"> <!-- 上面的指标 --> <div class="cursor" ref="cursor1" :style="{ borderTop: item.cusorBorder, left: (aniShow ? item.cursor : '0' )
css 横向进度条和竖向进度条实现代码
11-21
有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现 一、横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css"> .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc; } .bar { line-height:25px; height:100%;
通过HTML/CSS 实现各类进度条的功能。
最新发布
qq_44552416的博客
07-19 2295
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
css实现横向进度条和竖向进度条
gdjlc的专栏
11-28 6026
一、横向进度条 &lt;html&gt; &lt;head&gt; &lt;title&gt;横向进度条&lt;/title&gt; &lt;style type="text/css"&gt; .loadbar { width:200px; height:25px; background-color:#fff; ...
横向时间进度条
peter_qyq的博客
06-22 1539
function ready(){ if(${benefit==0}){ $("#money").attr("disabled","disabled"); }else{ $("#money").removeAttr("disabled"); } var now = new Date(); var hours = now.getHours(); var minut
CSS实现进度条和订单进度条---横向
zyf_smile的博客
10-12 3637
由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，css样式借鉴了网上的相关代码，下面是效果图，以及实现说明 首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多做说明， 1.css样式： /*进度条start*/ <style> .order_status { height: 175px; padding-top: 90px; ...
html 纵向进度条,css 横向进度条和竖向进度条实现代码
weixin_36278243的博客
05-31 548
有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现一、横向进度条横向进度条.loadbar{width:200px;height:25px;background-color:#fff;border:1px solid #ccc;}.bar{line-height:25px;height:100%;display:block;font-family:arial;font-size:...
CSS 说明横向进度条最后显示文字的实现代码
01-18
问题描述 在工作中想要实现如下效果： 解决思路 在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧 <span>688 <span>688 <span
CSS3评分分段进度条代码
04-06
在本文中，我们将深入探讨如何使用CSS3和JavaScript（JS）来创建一款商品点评打分的五段式进度条UI交互特效。这个特效通常应用于电子商务网站或者产品评价系统，允许用户对商品或服务进行评分，并以视觉化的方式展示...
CSS3多种不同颜色进度条特效代码
03-20
CSS3多种不同颜色进度条是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应...
jquary 横向百分比进度条
12-05
总结，创建一个jQuery横向百分比进度条涉及HTML布局、CSS样式设计以及JavaScript（jQuery）脚本编写。通过合理地组织这些元素，我们可以构建出美观且功能强大的进度条组件，为用户提供直观的反馈。
横向节点进度条
04-04
源码HorizontalProgress，可定制带动画的横向节点进度条，希望这个案例能够帮到大家的学习和使用。
横向多内容进度条
liuhao9999的博客
09-05 97
【代码】横向多内容进度条。
实现横向进度条（可拖拽）
weixin_43348064的博客
05-13 2989
横向进度条的实现(可拖拽) 横向进度条是使用挺广的，比如音乐播放器的进度条、上传下载、加载的时候也会用到横向进度条， 下面是播放器的效果图 我就以上面的进度条为例来实现横向的进度条。首先，需要介绍一下H5的新标签progress, progress 语法 <progress value="22" max="100"></progress> 属性 值 描述 value Number 已完成的任务 max Number 总任务 注意 Internet Ex
用CSS3实现动画进度条
热门推荐
蒋宇捷的专栏
03-19 1万+
<br /> <br />    CSS3的新特性为我们实现漂亮的进度条扫清了障碍，我们可以完全不需要任何图片和简单的Javascript代码就可以构建。<br />一、第一个例子<br />    效果图：<br /><br />    Demo地址：http://namepk.sinaapp.com/demo/progress.html。<br />1、  基本的HTML<br />    HTML代码非常简单：<br /> <div id="loading-status">
进度条动画css样式
april_4的博客
02-12 2996
好久没写样式了，今天要做一个动态的进度条，看了看别人的代码，再复习一遍吧 主要的样式是这样的 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...
CSS 说明横向进度条 最后显示文字的效
黄彪博客
11-09 512
文章参考 问题描述 在工作中想要实现如下效果： 解决思路 在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧 <div class="content"> <div class="bar first" style="width:100%"> <span>688</span> </div> <div class="bar second" style="width:50%"&
android 横向进度条_59、Android进度条使用详解
weixin_39963174的博客
11-27 711
ProgressBar是Android下的进度条，也是为数不多的直接继承于View类的控件,直接子类有AbsSeekBar和ContentLoadingProgressBar，其中AbsSeekBar的子类有SeekBar和RatingBar，ProgressBar一般用于显示一个过程，例如数据加载过程，文件下载进度，音乐播放进度等。ProgressBar的使用注意:1、Progress...
echarts 横向进度条
10-20
Echarts是一个基于JavaScript的开源可视化库，可以用来制作各种各样的图表，包括横向进度条。如果你想使用Echarts制作横向进度条，可以使用基于Echarts改造的进度条插件，具体步骤如下： 1. 引用Echarts文件和进度条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值