css实现成长值类似的进度条效果

效果：

代码：

<view><view class="levelGrow"><view class="progress"></view></view><view class="inner"><view>{{level}}</view><view>成长值{{growth}}/{{nextGrowth}}</view><view>{{nextLevel}}</view></view>
</view>

css：

.levelGrow{width: 80%;height: 60rpx;line-height: 60rpx;/* background-color: #3675F9; */background-color: #ffffff;opacity: 0.2;position: relative;margin-top: 30rpx;
}
.progress{width: 60%;height: 100%;background-color: #3675F9;position: absolute;top: 0;left: 0;
}
.inner{z-index: 99;width: 80%;height: 60rpx;line-height: 60rpx;position: absolute;top: 160rpx;left: 0;font-size: 24rpx;font-weight: normal;display: flex;flex-direction: row;justify-content: space-around;
}

实现原理就是z-index和position重叠实现

注意，progerss的width值可以使用js动态控制，根据数值计算出百分比，然后实现进度条的效果

css实现成长值类似的进度条效果相关推荐

CSS使用线性渐变实现滚动进度条
效果查看:https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100 CSS: body {position: relative;padding: 50px ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...
圆形百分比进度条效果
一.前言最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...
JS简单实现进度条效果
今天我们来学习一下,用JS来实现简单的进度条效果首先我们先来到HTML部分 <div class="box1"></div> css部分 .box1{wi ...
php jquery进度条,如何实现jQuery进度条效果
通过jQMeter.js插件可以简单的实现jQuery进度条效果,并且可以自定义它的样式实现jQuery进度条效果需要外部引入一个jQuery插件jQMeter.js.它是一款简单实用的轻量级进度条 ...
android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
android 双层进度条,CircularCounter 双层原形进度条效果《IT蓝豹》
CircularCounter 双层原形进度条效果 CircularCounter 双层原形进度条,根据数据的变化而增减的,支持逆向旋转. 本项目主要由CircularCounter自定义控件实现, ...

css实现成长值类似的进度条效果

css实现成长值类似的进度条效果相关推荐

最新文章

热门文章