uniapp纯CSS实现圆形进度条组件

niapp纯CSS实现圆形进度条组件。圆形进度条组件组合做一个步骤进度组件是非常常见。

纯 CSS 实现圆形进度条组件有以下几个好处：

轻量级：由于纯 CSS 实现，无需额外的 JavaScript 或图像资源，所以组件的文件大小相对较小，加载速度快，对页面性能的影响较小。

兼容性好：CSS 是 Web 标准的一部分，几乎所有现代浏览器都支持 CSS。因此，纯 CSS 实现的圆形进度条组件在各种设备和浏览器上都能正常显示和运行。

可定制性强：CSS 提供了丰富的样式属性和选择器，可以灵活地自定义圆形进度条的样式、颜色、大小、动画效果等，以满足不同项目和设计需求。

简单易用：纯 CSS 实现的圆形进度条组件通常使用简单，只需要在 HTML 中添加相应的 CSS 类或样式即可，无需复杂的配置或调用 JavaScript 函数。

性能优化：由于纯 CSS 实现的圆形进度条不涉及 JavaScript 的计算和操作，可以减轻客户端的计算负担，提高页面的响应速度和性能。

<template>
<view class="flex align-center diygw-col-24 justify-center">
<view class="progress-circle " :class="'progress-'+innerPercent" :style="{
'--not-progress-color':notProgressColor,
'--bg-color':bgColor,
'--color':color,
'--progress-color':progressColor,
'--width':$u.addUnit(width),
'--font-size':$u.addUnit(fontSize),
'--border-width':$u.addUnit(borderWidth)
}">
<view class="inner">
<view class="progress-number">{{innerPercent}}%</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
width: {
type: Number,
default: 100
},
borderWidth: {
type: Number,
default: 20
},
bgColor: {
type: String,
default: '#fff'
},
notProgressColor: {
type: String,
default: '#ddd'
},
progressColor: {
type: String,
default: '#07c160'
},
color:{
type: String,
default: '#07c160'
},
fontSize:{
type: Number,
default: 24
},
/**
* 进度(0-100)
*/
percent: {
type: Number,
default: 0
},
/**
* 是否动画
*/
animate: {
type: Boolean,
default: true
},
/**
* 动画速率
*/
rate: {
type: Number,
default: 5
}
},
computed: {
/**
* @private
*/
complete() {
return this.innerPercent==100
}
},
watch: {
percent(percent) {
this.setPercent()
}
},
data() {
return {
innerPercent: 0,
timeout: null
}
},
mounted() {
this.setPercent()
},
methods: {
setPercent() {
if (this.animate) {
this.stepTo(true)
} else {
this.innerPercent=this.percent
}
},
clearTimeout() {
clearTimeout(this.timeout)
Object.assign(this, {
timeout: null
})
},
stepTo(topFrame=false) {
if (topFrame) {
this.clearTimeout()
}
if (this.percent > this.innerPercent && !this.complete) {
this.innerPercent=this.innerPercent+1
}
if (this.percent < this.innerPercent && this.innerPercent > 0) {
this.innerPercent--
}
if (this.innerPercent !==this.percent) {
this.timeout=setTimeout(()=> {
this.stepTo()
}, this.rate)
}
}
}
}
</script>
<style lang="scss" scoped>
.progress-circle {
--progress-color:#63B8FF;
--not-progress-color:#ddd;
--bg-color:#fff;
--width: 240rpx;
--border-width: 10rpx;
--color:#777;
--font-size:1.5rem;

$diythemeColor:var(--progress-color) ;
$diybackColor: var(--not-progress-color) ;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--width);
height: var(--width);
border-radius: 50%;
transition: transform 1s;
background-color: $diybackColor;
padding:var(--border-width);

.inner{
width:100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index:1;
background-color: var(--bg-color);
}
&:before {
content: '';
left:0;
top:0;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $diythemeColor;
}

$step: 1;
$loops: 99;
$increment: 3.6;
$half: 50;

@for $i from 0 through $loops {
&.progress-#{$i * $step}:before {
@if $i < $half {
$nextDeg: 90deg+($increment * $i);
background-image: linear-gradient(90deg, $diybackColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
@else {
$nextDeg: -90deg+($increment * ($i - $half));
background-image: linear-gradient($nextDeg, $diythemeColor 50%, transparent 50%, transparent), linear-gradient(270deg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
}
}

.progress-number {
width: 100%;
line-height: 1;
text-align: center;
font-size: var(--font-size);
color: var(--color);
}
}
</style>

SS的shape-outside属性允许你定义一个元素（通常是浮动元素）的外部形状。这个形状可以是矩形、圆形或者自定义路径，它会影响其周围浮动元素的布局。shape-outside可以用于创造一些视觉上非常有趣的文本环绕效果，比如让文本环绕一张图片、一个形状或者其他浮动元素。

一个典型的效果如下所示：

1. 基本用法

想要完成上面的效果，需要先掌握shape-outside的一些基本用法：

矩形 (rectangle): 使用border-radius属性可以创建圆角矩形。

.float-element {
  shape-outside: rectangle(10px, 10px, 10px, 10px); /* 设置圆角 */
}

圆形 (circle): 可以指定圆形的半径。

.float-element {
  shape-outside: circle(50%); /* 半径为元素宽度的50% */
}

椭圆形 (ellipse): 可以指定椭圆形的两个半径。

.float-element {
  shape-outside: ellipse(50% 25%); /* 水平半径50%，垂直半径25% */
}

多边形 (polygon): 可以创建具有任意数量边的多边形，需要指定每个顶点的坐标。

.float-element {
  shape-outside: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Optional: to clip the element itself to a circle */

}

路径 (path): 使用SVG路径定义形状。

.float-element {
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
}

2. 文本环绕

shape-outside属性最常用于创建文本环绕效果。当一个浮动元素的shape-outside属性设置为margin-box、border-box或padding-box时，文本会环绕该元素的相应盒子模型边缘。此外，还可以使用url()函数引用图片或SVG的路径作为形状。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clip Text Around Image</title>
<style>
  .float-image {
    float: left;
    shape-outside: circle(50%); /* 50% of the element's width */
    width: 200px; /* Width of the image */
    height: 200px; /* Height of the image */
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url('./强.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire element */
    clip-path: circle(50%); /* Optional: to clip the element itself to a circle */
  }

</style>
</head>
<body>

<div class="float-image"></div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed blandit ligula non leo cursus, vitae eleifend nisl molestie. Nulla quis ligula at mauris rhoncus vestibulum. Maecenas at nulla ipsum. Donec rutrum congue leo at malesuada. Integer auctor tristique sem, vitae lacinia sem sagittis sed. Nullam auctor, enim nec pellentesque aliquam, arcu dui lacinia mauris, id lobortis enim odio id felis.
  </p>

</body>
</html>

在这个示例中：

.float-image 类定义了一个浮动的圆形图片元素，其中 shape-outside 属性使文本环绕该圆形。
.text-wrap 类定义了文本块的样式，它有一个左边距，以适应图片的宽度和边距。
CSS 的 background-image 属性用于将图片设置为元素的背景，并使用 background-size: cover; 确保图片完全覆盖元素，而不改变其宽高比。
一个可选的 clip-path: circle(50%); 被添加到 .float-image，这样图片本身也被裁剪成圆形。
HTML 中的 <div> 元素用于创建图片和文本环绕效果。

兼容性和注意事项

shape-outside是CSS Shapes Module Level 1的一部分，并非所有浏览器都支持。
当使用自定义形状时，确保为不支持shape-outside的浏览器提供一个回退样式。
使用shape-outside时，要注意性能影响，尤其是使用复杂路径或图片作为形状时。

3. 更多示例

示例 1：使用圆形环绕图片

.float-image {
  float: left;
  shape-outside: circle(50%); /* 50% 指的是图片宽度的一半 */
  width: 200px; /* 图片的宽度 */
  height: 200px; /* 图片的高度 */
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 确保图片覆盖整个浮动元素 */
}

在这个例子中，文本将环绕一个圆形图片。

示例 2：使用椭圆形环绕图片

.float-image {
  float: left;
  shape-outside: ellipse(50% 25%); /* 水平半径是宽度的50%，垂直半径是高度的25% */
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

这里文本环绕的是一个椭圆形图片。

示例 3：使用多边形环绕文本

.float-shape {
  float: left;
  shape-outside: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: #f0f0f0; /* 背景颜色，用于演示形状 */
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

在这个例子中，文本将环绕一个钻石形状的元素。

示例 4：使用SVG路径环绕文本

.float-svg {
  float: left;
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

这里文本环绕的是一个通过SVG路径定义的自定义形状。

示例 5：文本环绕带有图片的复杂形状

.float-image-complex {
  float: left;
  shape-outside: url('path/to/complex-shape.svg#shapeID');
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  width: 200px;
  height: 150px;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

在这个例子中，文本环绕的是一个SVG文件中定义的复杂形状，并且该形状元素背后有一张图片。

示例 6：使用margin属性增加环绕空间

.float-shape {
  float: left;
  shape-outside: circle(50%);
  margin: 20px; /* 增加环绕空间 */
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
}

通过增加margin属性的值，可以让文本与形状之间有更多的空间。

4. shape-outside 使用场景

shape-outside属性除了用于环绕文本之外，还可以用于其他一些创造性的布局和设计效果。例如：

1. 创造视觉焦点

通过使用shape-outside创建非矩形的浮动元素，可以吸引用户的注意力，引导他们的视线。例如，一个心形或星形的浮动元素可以作为页面上的一个视觉焦点。

2. 设计响应式布局

在响应式设计中，可以使用shape-outside来创建适应不同屏幕尺寸的布局。例如，一个形状可以根据视口的大小变化而变化，从而影响其周围元素的布局。

3. 制作有趣的按钮和链接

可以给按钮或链接设置shape-outside，让文本环绕这些形状，创造独特的交互元素。

4. 增强数据可视化

在数据可视化中，可以使用shape-outside来增强图表和图形的视觉效果，例如，让文本环绕一个饼图或柱状图的轮廓。

5. 制作动画效果

结合CSS动画，shape-outside可以用于创建动态变化的形状，从而影响其周围元素的布局和动画效果。

6. 增强表单元素的视觉效果

可以让表单元素如输入框或按钮采用非标准的形状，以提升表单的视觉吸引力。

7. 创造艺术作品和背景

使用shape-outside可以创建复杂的艺术作品或背景图案，这些形状可以是几何图形、自然形状或其他抽象图案。

8. 制作导航菜单

可以设计一个非传统的导航菜单，其中菜单项采用独特的形状，并且菜单项周围的文本环绕这些形状。

9. 增强品牌元素

如果品牌有特定的形状标志或图案，可以使用shape-outside将这些元素融入到网页设计中，增强品牌识别度。

10. 制作游戏界面

在游戏或互动应用中，可以使用shape-outside来创建有趣的界面元素，如环绕特定形状的得分或生命值显示。

图片添加区域链接的基本写法

首先我们看看效果：

实现这样的功能需要学习以下几点内容。

1.认识<img/><map><area/></map>基本结构

首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>图片区域链接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加区域链接的图片的路径，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

让<img>标签通过<map>的名字来驱使<map>为自己工作。

需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。

第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。

示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面来划分区域。

2.为图片划分区域的方法

<area>是用来划分区域的标签，area也是“”区域“”的意思。

默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。

分别添加三个形状，示例代码如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。

为<area>添加coords属性可以指定区域的位置和范围。

如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：

如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如

这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：

这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？

3.使用Gimp软件精准定位图片区域

使用Gimp软件可以解决这个问题。

Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。

下载地址：https://www.gimp.org/

双击安装即可，注意选择一下安装目录。

完成安装之后打开，界面如下：

点击“文件”找到“打开”：

选择要打开的图片名字：

点击名称后，右边会有图像预览，点击“打开”即可：

打开后如图：

把鼠标放到图像的任意位置，看左下角：

这里就会显示我们鼠标所在的像素坐标数值。

这样我们就能方便地写“poly”的coords了。

请在空闲时找一张图片演练一下吧！

4.为区域添加链接

在<area/>标签中添加href属性即可指定链接路径，如下：

href="https://www.zhihu.com/question/284642168"

添加title属性可以在鼠标滑过链接区域时提示读者，如下：

title="歼20气动外形分析"

今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商