JS环形进度条 渐变色

Vue 3 + Element Plus 动态渐变色进度环:从数据驱动到视觉反馈的进阶实践 本文详细介绍了如何在Vue 3和Element Plus中实现动态渐变色进度环,从基础配置到高级应用全面覆盖。通过SVG渐变和数据绑定技术,开发者可以创建响应式、视觉反馈丰富的环形进度组件,提升数据可视化效果。文章包含完整代码示例和性能优化建议,是前端开发者的实用指南。 阅读详情

html部分

<div class="jixulvcontent">
    <div class="jixulvmainball">
    	<span class="jixulvpertext">70%</span>
    	<div id ="target" class="jixulvzhizhen"></div>
      <div>
      	<ul class="jixulvitemwrap">
      </ul>
      </div>
    </div>
  </div>

css部分

.jixulvcontent{
  margin-top: 100px;
}
.jixulvmainball {
  margin: 70px auto;
/*   background: #0AF135; */
  width: 150px;
  height: 150px;
  border-radius: 50%;
  line-height: 150px;
  text-align: center;
  position: relative;
  font-size: 80px;
  color: #fff;
}
.jixulvpertext{
  position:absolute;
  top:65%;
  left:33%;
  z-index: 9;
  font-size:40px;
}
.jixulvitemwrap {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  top: -150px;
  left: -158px;
  border: 235px solid rgba(190, 20, 20, 0);
  border-radius: 50%;
  transform: rotate(240deg);
  z-index: 3;
}


.jixulvitemwrap li {
  position: absolute;
  top: -100px;
  left: -4px;
  transform-origin: 4px 100px;
  transition: all .3s .5s;
}

.jixulvitem {
  width: 10px;
  height: 10px;
  background: #4e6a4f;
}
.jixulvzhizhen{
	position: absolute;
    z-index: 9;
    left: 6%;
    top: 33%;
    width: 80px;
    height:80px;
/* 	transform:rotate(100deg); */
/* 	-ms-transform:rotate(100deg);  */
/* 	-moz-transform:rotate(100deg);  */
/* 	-webkit-transform:rotate(100deg); */
/* 	-o-transform:rotate(100deg);  */
	transform-origin : 87% 50% 0;
  background:url('img/todo/1.png') no-repeat;
  background-size:cover;
}
.jixulvzhizhen img{
	width:100%;
	height:100%;
}

中间指针部分主要调试指针旋转的圆心位置
transform-origin : X Y 0;

js部分

           var current = 0;
           var turnRight = function (pers){
        	current = pers*2.4-30;
//   			current = (current)%360;
   			document.getElementById('target').style.transform = 'rotate('+current+'deg)';
   		}
           function render(pers){
        	   turnRight(pers);
        	   var fragment = document.createDocumentFragment();

        	   var itemnum = 72
        	   var deg = 360 / itemnum

        	   var r=58
        	   var g=255
        	   var b=2

        	   var per = pers /100

        	   var text = document.querySelector('.jixulvpertext')
        	   text.innerText=per*100 + '%'

        	   for(var i=0;i<itemnum;i++){
        	     var item = document.createElement('div')
        	     item.className = "jixulvitem"
        	     if(per != 0 && i <= itemnum * per * 2/3 ){
        	       var bgcolor = 'rgb('+ (r+4*i)+','+(g-5*i)+','+b+')'
        	       item.style.background = bgcolor
        	     }
        	   
        	     var li = document.createElement('li')
        	     var curdeg = deg * i
        	     if(curdeg<=240){
        	       li.style.transform=`rotate(${curdeg}deg)`
        	       li.appendChild(item)
        	       fragment.appendChild(li)
        	     }
        	 }
        	 var itemwrap = document.querySelector('.jixulvitemwrap')

        	 itemwrap.appendChild(fragment)
        	 }

        	 render(50);
eCharts实现颜色渐变效果环形图 之前我尝试了Element-ui的环形进度条实现颜色渐变效果 这个对eCharts来说简直就是小case。 完成之后的效果图如下: 对应的页面源代码如下: <template> <div class="panel-content"> <div style="width: 300px;height: 300px;background-color: #0E1824;" ref="chartContent"> </di 阅读详情

相关推荐

JS实现环形进度条(从0到100%)效果

最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束。动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半。 如图 代码如下 demo.html <!doctype html> <html lang=zh> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1> <meta name=viewport content=width=device-width, initial-scale=1.0> <title

js实现页面加载颜色渐变进度条

标签: div class="progress"> div class="progress-val" id="bar_width">100%div> div class="progress-bar"> span class="progress-in" id="bar" style="width:0%">span> div> div> 样式表:

☆╮123☆ 2842

傅里叶红外(FT-IR):Origin数据处理、光谱绘图、曲线优化、图形美化

双击 X 轴,选择“轴线和刻度线”,设置粗细为“2”(较常用的粗细度),主刻度和次刻度为“朝内”,然后在此对话框内选择左轴,设置粗细为“2”,主刻度和次刻度为“无”,上轴和右轴同左轴。(4)在第二个图层基础上新建第三个图层,针对第二组数据重复上述中(1)和(2)的操作,再添加第三组数据的折线图,并重复上述中(3)的操作。FTIR 光谱上的峰只有相对的强弱,因此只分析一个光谱上的一个峰的强度大小并无意义,一般分析两个光谱在同一位置的峰强相对大小,或者分析同一光谱不同位置的峰强相对大小并与另一光谱进行比较。

qiushireader的博客 3932

原生js实现圆环进度条

【代码】原生js实现圆环进度条。

suuntil的博客 877

用Pixhawk 2.4.8和PX4 1.13,从零搭建你的第一支无人机编队(附避坑清单)

本文详细介绍了如何使用Pixhawk 2.4.8飞控和PX4 1.13固件从零搭建低成本无人机编队系统。涵盖硬件选型、固件配置、多机通信和编队飞行逻辑开发的全流程,特别针对学生和爱好者提供实战验证的避坑方案,帮助实现多机协同飞行。

weixin_27219587的博客 403

非球面检测

摘要:非球面镜检测主要采用干涉法,包括零位补偿和非零位补偿两种方式。零位补偿通过透镜组完全校正像差,精度达1%波长,但设计复杂成本高;非零位补偿利用部分像差补偿降低波前斜率,适用于规则非球面。折射-衍射混合补偿镜能同时校正多种像差。实际检测中可采用物理补偿镜或动态CGH加载方案,光路设计需运用坐标断点和多重结构技术实现复杂光路建模。不同方法各具优势,需根据检测需求选择合适方案。

Zhaxibamao的博客 2107

环形进度条渐变色的两种方案

实现如下渐变色环形进度条 一提到环形进度条渐变色,相信大家先想到的是el-progress,以及echarts。现在我们就这两种方案进行开发。指路element-plus,访问官网 官网中给出了环形进度条的写法,但是没有给出渐变色的配置项,这就需要我们自己手动修改,代码如下: 在控制台中我们可以看到,实际上el-progress就是两个path组成,第一个就是底色环状,第二个就是进度条,通过修改stroke,我们看到蓝色被我们修改成了红色,所以 如上代码,我们需要手动添加一个svg代替element中的第

qq_45840993的博客 5601

TP4054充电电路发热严重?手把手教你调整电阻值降低温度(附实测数据)

本文针对TP4054锂电池充电电路发热严重的问题,提供了详细的排错与解决方案。通过分析发热原理,指出核心在于PROG引脚电阻值设定,并手把手指导如何计算和选择正确的电阻以降低充电电流与温度。文末附有不同电阻下的实测温度与性能数据,为电子爱好者和工程师提供了实用的调试参考。

p4q5r6s7t的博客 406

JS环形进度条

【代码】JS环形进度条。

qq_59670965的博客 513

Windows 下安装 ros2 的超详细教程

Windows11 ROS安装

2401_83363439的博客 3318

从Palantir到AI时代:Forward Deployed Engineer模式的深度解析

《从Palantir到AI时代:FDE模式的创新与挑战》摘要:Palantir开创的前置部署工程师(FDE)模式正在成为AI创业公司的标配。该模式通过现场工程师深入了解客户需求,填补产品与实际应用间的鸿沟,颠覆了传统SaaS规模化路径。核心优势在于将定制化服务转化为产品发现机制,特别适合高度异质化的AI市场。成功关键在于平衡定制与标准化,通过合同价值增长、产品杠杆效应等独特指标衡量成效。FDE人才需要兼具领域洞察力与快速原型能力。这一模式表明,在AI等新兴领域,深入客户现场可能比单纯追求技术突破更能创造商业

老孙 | Ethan Sun 的博客:AI 智能体与 AI 原生软件的工程实践 4539

用js+css实现圆环型的进度条——js+css基础积累

用js+css实现圆环型的进度条——js+css基础积累

yehaocheng520的博客 1115

【MeshLib & VTK】MeshLib PK VTK

本文分享三维几何处理库MeshLib,并将其与VTK进行对比,希望对各位小伙伴有所帮助!

qq_40041064的博客 1071

【Element】Element plus Progress 渐变色设置

效果 代码 参考博客 推荐看这个来配置elementUI环形进度条设置渐变色和修改底色

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈 854

Android 车联网——CarAudioService介绍(六)

CarAudioService 是 Android Automotive OS 中的一个重要组件,用于管理车辆中的音频功能。它是 Android Auto 的一部分,负责处理车辆音频的播放、控制和路由。CarAudioService 使用标准的 Android 组件架构,基于 Binder 通信机制,提供了一组 API,用于管理车辆音频。它包括以下主要功能:音频路由管理:CarAudioService 可以让开发者控制音频的路由,即将音频发送到不同的输出设备,例如车辆的扬声器、耳机等。

小旭的专栏 3201

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

canvas实现环形渐变进度条(vue)

利用canvas实现环形渐变进度条(vue) 以下是封装好的组件: <template> <!--画布尺寸的控制--> <div class="canvas_area" ref="canvasArea"> <canvas :id="id" width="208px" height="208px"></canvas> </div> </template> <script>

weixin_42180591的博客 1810

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

SVG制作环形进度条

病毒横行,不出门,干脆在家里学习吧~ 先看效果: 我们来做一个简单版本的。需要用到的SVG知识点: 1、圆形标签 circle <circle cx="110" cy="110" r = "100" fill="none" stroke="#eee" stroke-width="20"> </circle> cy ...

九天翔龙的技术博客 3495

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

html进度条圆圈渐变色,html5 canvas绘制环形进度条,环形渐变色仪表图

html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvasarc()方法。一:绘制环形进度条您的浏览器不支持canvas标签。var pper=0;var pper_interal;var dushu=document.getElementById('dushu');var...

weixin_36352910的博客 880

canvas 手写环形进度条

<template> <a-card :bordered="false"> <a-row> <a-col :span="12"> <canvas id="canvas" width="500px" height="500px">您的浏览器版本过低</canvas> </a-col> </a-row> </a-card> </temp

yinmeizhuang的博客 307

基于canvas 2D实现微信小程序自定义组件-环形进度条

最近开发一个小程序项目**博闻金榜**答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个环形进度条微信小程序自定义组件,文中有示例代码,写的比较粗陋,感兴趣的小伙伴们可以讨论交流...

yi724926089的博客 1296

用初中数学知识撸一个canvas环形进度条,熬夜整理小米前端面试题

对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

2401_84004024的博客 1130

html5 canvas绘制环形进度条,环形渐变色仪表图

html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvasarc()方法。 一:绘制环形进度条 <canvas id="myCanvas1" data-percent="60"> 您的浏览器不支持canva...

weixin_34290000的博客 339

android绘制环形进度_用初中数学知识撸一个canvas环形进度条

原文链接:用初中数学知识撸一个canvas环形进度条 - 掘金原文作者:Tusi周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点。设计稿截图如下:我的第一反应还是找现成的组件,市面上很多组件都实现了前3点,独独没找到能画进度圆点的组件,不然稍加定制也...

weixin_35945480的博客 142

Vue3 Element Plus 使用el-progress实现【动态渐变色】环形进度条 - 附完整示例

Vue3 Element Plus 使用el-progress实现【动态渐变色】环形进度条 - 附完整示例

m0_48968874的博客 1143

canvas画一个渐变色的环形进度环

canvas画一个渐变色的环形进度环。

weixin_52375544的博客 140
上一篇: H5的canvas实现环形进度条
下一篇: js实现表格首行首列固定滑动
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

请叫我大豆包

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值