百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

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

bigegpt 2024-08-27 12:05 5 浏览

uniapp纯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>


相关推荐

Go语言泛型-泛型约束与实践(go1.7泛型)

来源:械说在Go语言中,Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束(Constraints),以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容:一、什么是泛型约束?**泛型...

golang总结(golang实战教程)

基础部分Go语言有哪些优势?1简单易学:语法简洁,减少了代码的冗余。高效并发:内置强大的goroutine和channel,使并发编程更加高效且易于管理。内存管理:拥有自动垃圾回收机制,减少内...

Go 官宣:新版 Protobuf API(go pro版本)

原文作者:JoeTsai,DamienNeil和HerbieOng原文链接:https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)(golang入门项目)

1.channel关闭后读的问题当channel关闭之后再去读取它,虽然不会引发panic,但会直接得到零值,而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用,用go语言编写,说是某某程序的windows图形化客户端,体验一下发现只是一个托盘,然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案(Go1.16+)ioutil.ReadFile(filename)一次性读取整个文件内容(返回[]byte)os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的,你也可以上周我开始玩GoLang,它是一种由Google制作的类C编译语言,非常轻量和快速,事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介(golang channel长度和容量)

这篇文章重点介绍Channels(通道)在Go中的工作方式,以及如何在代码中使用它们。在Go中,Channels是一种编程结构,它允许我们在代码的不同部分之间移动数据,通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型:Go将Interface{}替换为“Any”,这是一个类型别名:typeany=interface{}这会引入了泛型作好准备,实际上,带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性(golang2.0特性)

作者:腾讯PCG代码委员会经过十余年的迭代,Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施,上到微服务,越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog,作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo(阿波罗)是携程框架部门研...

Golang使用grpc详解(golang gcc)

gRPC是Google开源的一种高性能、跨语言的远程过程调用(RPC)框架,它使用ProtocolBuffers作为序列化工具,支持多种编程语言,如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库,并将日志写到了磁盘文件中,代码比较简单,适合练手。有兴趣的可以通过这个链接前往:https://github.com/...

如何从 PHP 过渡到 Golang?(php转golang)

我是PHP开发者,转Go两个月了吧,记录一下使用Golang怎么一步步开发新项目。本着有坑填坑,有错改错的宗旨,从零开始,开始学习。因为我司没有专门的Golang大牛,所以我也只能一步步自己去...