30%

以下样式100upx是50upx的2倍，这是尺寸比例

.con {

position: relative;

display: inline-block;

height: 100upx;

width: 100upx;

}

.percent-circle {

position: absolute;

height: 100%;

background: #46A4DA;//走过的进度条颜色

overflow: hidden;

}

.percent-circle-right {

right:;

width: 50upx;

border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;

}

.right-content {

position: absolute;

content: '';

width: 100%;

height: 100%;

transform-origin: left center;

transform: rotate(0deg);

border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;

background: #ccc;//进度条底色

}

.percent-circle-left {

width: 50upx;

border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;

}

.left-content {

position: absolute;

content: '';

width: 100%;

height: 100%;

transform-origin: right center;

transform: rotate(0deg);

border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;

background: #ccc;//进度条底色

}

.text-circle {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

height: 80%;

width: 80%;

left: 10%;

top: 10%;

border-radius: 100%;

background-color: #f2f2f2;//百分比数字的底色

}

移动端纯CSS3制作圆形进度条所遇到的问题

近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和 ...

vue 圆形进度条组件解析

项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

android 自定义控件——(四)圆形进度条

----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...

简单实用的纯CSS百分比圆形进度条插件

percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

WPF利用动画实现圆形进度条

原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

canvas绘制圆形进度条(或显示当前已浏览网页百分比)

使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

【Android 应用开发】 自定义 圆形进度条 组件

转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

Qt自定义控件系列(一) --- 圆形进度条

本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

随机推荐

[讨论] win7封装时如何直接开通局域网共享

ekincheng 发表于 2016-10-31 20:17:54 https://www.itsk.com/thread-371838-1-5.html Win7封装时不能像XP那样直接开启局域网共 ...

DEV GridControl.TableView FocusedRow选中行背景颜色

上次修改了TableView.RowStyle,导致了一个问题:覆盖了GridControl默认的选中行颜色. 于是需要重写选中行的颜色. 刚开始的想法是: ...

深入理解jvm

Java与C++之间有一堵由内存动态分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来. 概述: 对于从事C.C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的皇帝 ...

wxPython Major类

转载自:http://www.yiibai.com/wxpython/wxpython_major_classes.html   原始的 wxWidgets(用C++编写)是一个巨大的类库.GUI类从 ...

Nginx的500,502,504错误解决方法

Nginx的500,502,504错误解决方法 一.解决500错误: 1.500错误指的是服务器内部错误,也就是服务器遇到意外情况,而无法履行请求. 2.500错误一般有几种情况: (1)web脚本错 ...

paramiko库安装

python的paramiko库用于执行ssh2连接(client和server).安装方式如下: 硬件环境:Raspberry 2B,arm,1GB RAM,16GB TF卡; 系统环境:Linux ...

听说图像识别很难，大神十行代码进行Python图像识别

随着深度学习算法的兴起和普及,人工智能领域取得了令人瞩目的进步,特别是在计算机视觉领域.21世纪的第二个十年迅速采用卷积神经网络,发明了最先进的算法,大量训练数据的可用性以及高性能和高性价比计算的 ...

开放windows服务器端口-----以打开端口8080为例