用Vue的动态样式加上Css写进度条

最新推荐文章于 2024-06-09 10:01:24 发布
最新推荐文章于 2024-06-09 10:01:24 发布
阅读量1.5k 收藏 6
点赞数 6
文章标签： html css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43927699/article/details/108141972
版权

用Vue的动态样式加上Css写进度条

进度条主要是由两部分组成：
由底层的一个100%长度的总条（背景条）和一个上层任意长度（可以根据后台调用的数据来动态改变上层的进度条长度）的进度条组成，类名"progress_out"是底层的背景条，类名"progress_in"是上层的进度条，"progress_width"是自己在定义的变量，当然啦这个变量要在0~100之间，进度条不能超过底层的背景条。我这里给宽度定义的是90%，vue的写法也要正确才行。

效果图：
progress_1.png

html代码

<p>
    <span class="progress_out">
        <span class="progress_in" :style="{
最低0.47元/天 解锁文章
童童童彤
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于VUE步骤进度条样式代码
04-06
基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
HTML+css制作简易进度条
12-13
1、HTML代码 复制代码代码如下: 经验值： <span class=”progress-bar”><b xss=removed> </b></span> 2、CSS样式 复制代码代码如下:.progress-bar, .progress-bar b{background: url(“/images/ico.png”) no-repeat scroll 0 0; display: block;} .progress-bar {background-position: 0 0; height: 15px;width: 430px;} .progress-
css 前端实现通过css动画实现进度条动态加载效果
工作中遇到问题记录
01-15 1590
css 前端实现通过css动画实现进度条动态加载效果
探索 Vue 进度条组件：vue-progress
最新发布
gitblog_00029的博客
06-09 335
探索 Vue 进度条组件：vue-progress 项目地址:https://gitcode.com/wangdahoo/vue-progress 在前端开发中，进度条是提供实时反馈的重要元素，它能让用户了解任务的进行状态。今天，我们要介绍一个强大的 Vue 组件——vue-progress，将 Progressbar.js 功能无缝集成到 Vue 中，让你轻松创建各种类型的进度条。 项目介绍 v...
vue中利用nprogress插件实现网页进度条效果
weixin_74285634的博客
06-25 1260
vue项目中利用nprogress插件实现网页进度条效果。
纯css进度条，简单美观实用。
qq_34716929的博客
03-11 511
html：在style里给 “–precent”赋值，就能显示对应百分比。
vue实现自定义进度条
liyh722的博客
07-17 1176
vue实现自定义进度条
原生 css 实现进度条
逆风优雅的博客
04-07 4409
方案一：通过data控制它的样式 方案二：通过js控制进度条
CSS实现进度条和订单进度条---横向
zyf_smile的博客
10-12 3611
由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，css样式借鉴了网上的相关代码，下面是效果图，以及实现说明 首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多做说明， 1.css样式： /*进度条start*/ <style> .order_status { height: 175px; padding-top: 90px; ...
css实现进度条
weixin_63681863的博客
11-09 1424
【代码】css实现进度条。
css 纯样式实现绘出进度条
gdgztt的专栏
12-10 370
css 纯样式实现绘出进度条
基于VUE步骤进度条样式特效代码
03-20
总之，这个基于Vue的步骤进度条特效代码利用了Vue的组件化和数据绑定特性，结合CSS样式，实现了动态的、可视化的流程进度指示。通过理解和学习这个项目，开发者可以进一步提升在Vue.js框架下的前端开发能力，同时也...
VUE element-ui响应式步骤进度条样式代码
06-11
在本文中，我们将深入探讨如何使用VUE框架与element-ui库来创建响应式的步骤进度条。Element-ui是一个基于Vue.js的UI组件库，它提供了一系列丰富的界面元素，其中包括步骤条组件，非常适合用于处理多步骤流程的用户...
Vue进度条progressbar组件功能
08-27
2. 模板文件：progressbar组件表现为.vue文件的形式，template部分内容包括进度条组件的基本样式和结构。 3. 脚本文件：progressbar组件的script部分，包括进度条组件的逻辑实现。 4. 样式文件：progressbar组件的...
vue使用nprogress加载路由进度条的方法
10-15
以下是如何在 Vue 中使用 `nprogress` 实现路由加载进度条的详细步骤。 1. **安装**： 首先，你需要通过 npm 或者 yarn 来安装 `nprogress` 库。在项目根目录下运行以下命令： ```bash npm install --save ...
VUE3实用组件开发合集三：进度条组件
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
07-17 3243
VUE3实用组件开发合集三：进度条组件，包括源码，开发文档、素材等。 使用vue3开发实现各种进度条，正常进度条、圆形进度条、分步进度等各种进度条组件，并添加特定的样式效果。封装为组件，可直接调用，通过参数可指定样式、效果等。提供实例源码、开发过程视频及实现过程。.........
vue.js 步骤条_Vue.js的简单步骤指示器
cuk5340的博客
07-23 535
vue.js 步骤条 步态指示符 (vue-step-indicator) A Simple step indicator for Vue.js. Vue.js的简单步骤指示器。 View demo 查看演示 Download Source 下载源 安装 (Install) yarn add vue-step-indicator CDN: UNPKG | jsDelivr(avail...
超赞的CSS3进度条 可以随进度显示不同颜色
weixin_34075268的博客
04-10 788
现在的WEB已经不是以前的WEB了，传输更大的数据量，有着更加复杂的计算，这就需要利用进度条来提高用户体验，必要时可以让用户耐心等待，不至于因操作卡了而关掉你的网页。前几天我在网上看到一款和一般进度条不太一样的玩意，它的外观是一条直线，末端有个小球，在进度变化时可以显示数字百分比，更可以用不同颜色来表示当前进度的状态。来看看效果图。 一看进度条外观，还不错吧。 同时，我们也可以在这里看到进...
css +vue3实现圆环进度条根据参数动态变化
04-28
可以通过计算属性和绑定样式实现圆环进度条根据参数动态变化。 首先，在 Vue3 中创建一个组件，将参数作为组件的 props 传入。然后，使用计算属性计算出进度条的样式，并将样式绑定到对应的 HTML 元素上。最后，使用 CSS 实现圆环的效果。 下面是一个示例代码： ```vue <template> <div class="progress-ring"> <div class="progress-bar" :style="progressStyle"></div> <div class="progress-label">{{ progress }}%</div> </div> </template> <script> export default { props: { progress: { type: Number, required: true, }, }, computed: { // 计算进度条的样式 progressStyle() { const progress = this.progress <= 100 ? this.progress : 100; const rotation = `rotate(${(progress / 100) * 360}deg)`; return { transform: rotation, }; }, }, }; </script> <style scoped> .progress-ring { position: relative; width: 100px; height: 100px; } .progress-bar { position: absolute; width: 100%; height: 100%; border-radius: 50%; clip: rect(0, 50px, 100px, 0); background-color: #f2f2f2; transform: rotate(0deg); z-index: -1; } .progress-bar::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; clip: rect(0, 50px, 100px, 0); background-color: #2196f3; transform-origin: center center; } .progress-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #2196f3; } </style> ``` 在上面的代码中，我们定义了一个名为 `progress-ring` 的容器，容器中包含一个圆环进度条和一个显示进度百分比的标签。通过计算属性 `progressStyle` 计算出进度条的样式，并将样式绑定到 `progress-bar` 元素上。最后，使用 CSS 实现圆环的效果。 你可以将这个组件作为子组件嵌入到父组件中，在父组件中传入进度参数即可实现根据参数动态变化的圆环进度条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值