纯CSS实现圆形进度条
2024-09-29 15:10:44
CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下:
思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是外面的div的overflow为hidden,这样就可以省去内部div超出的部分,然后通过控制内部div的margin-top属性来控制进度条的进度,这些可以在js中来实现。做法还算简单,下面是html和css文件内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Css Demo</title>
<link rel="stylesheet" href="style.css" />
<script>
function setProgressValue(id, val)
{
var progress = document.getElementById(id);
var masker = progress.getElementsByClassName('progress_masker');
var value = progress.getElementsByClassName('progress_value');
if(masker.length>0)
{
masker[0].style.marginTop = "" + val + "%";
}
if(value.length>0)
{
value[0].innerHTML = "" + (100 - val) + "%";
}
}
</script>
</head>
<body onLoad="setProgressValue('progress', 20);">
<div id="content">
<div id="progress">
<div class="progress_value"></div>
<div class="progress_outer">
<div class="progress_inner">
<div class="progress_masker">
</div>
</div>
</div>
<div>
</div>
</body>
</html>
#progress
{
width:200px;
height:200px;
padding:;
}
.progress_outer
{
height:100%;
width:100%;
background-color:gray;
border-radius:calc(100%/2);
border:5px solid black;
padding:; box-shadow: 0px 2px 4px #555555;
-webkit-box-shadow: 0px 2px 4px #555555;
-moz-box-shadow: 0px 2px 4px #555555;
} .progress_inner
{
height:100%;
width:100%;
border:1px solid yellow;
border-radius:calc(100%/2);
position:relative;
background-color:white;
overflow:hidden;
text-align:center; } .progress_masker
{
height:100%;
width:100%;
background: -webkit-gradient(linear,center top,center bottom,from(#0ff), to(#0f0));
background: -moz-linear-gradient( top,#fff,#0f0);
background: -o-linear-gradient( top,#fff,#0f0)
} .progress_value
{
width:100%;
color:black;
font-weight:bolder;
background-color:transparent;
text-align:center;
}
因为在css中采用了相对布局,所以要更改进度条的大小只用更改最外层的div的宽度和高度,在这儿就是id为progress的div。
最新文章
- [算法]——快速排序(Quick Sort)
- C# - 多线程 之 进程与线程
- BZOJ4540 [Hnoi2016]序列
- Oracle 11.2.0.1的一个Bug,客户端报ORA-03113: 通信通道的文件结尾
- MUA
- core java 5~6(OOP &; 高级语言特征)
- WS之cxf处理的复杂类型(Map)
- ntdll.dll函数原型
- JS中实现A*算法寻路
- Linux目录结构及快捷键
- 无分类编址 CIDR (构成超网)
- 第十五章:Oracle12c 数据库 警告日志
- codeforces 1082G - Petya and Graph 	 最大权闭合子图 网络流
- js——图片懒加载
- Dart 创建Map
- java socket 基础操作
- oath2
- 8.Django-form组件
- elasticsearch 镜像使用
- Word中选择中内容后变成C,VMware 虚拟中Ctrl键一直被按住了
热门文章
- easyui 之ComboTree 用法Demo
- 转载:ODS简介
- js禁用回退键backspace解决办法
- iOS求职之OC面试题
- Notification NotificationManager RemoteViews PendingIntent
- PKU 1002解题总结
- NIC bonding
- 在C#中使用C++编写的类
- Yii2 AR find用法 (2016-05-18 12:06:01)
- Windows 7上打开IE浏览器报错:无法启动此程序,因为计算机中丢失api-ms-win-core-path-|1-1-0.dll。尝试重新安装该程序以解决此问题。