利用css3实现进度条效果及动态添加百分比_WidthPercentage资源-CSDN下载

70 浏览量 2020-11-20 14:55:13 上传评论收藏 37KB PDF 举报

资源详情

资源评论

资源推荐

利用利用css3实现进度条效果及动态添加百分比实现进度条效果及动态添加百分比

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css

去实现，优化。

先贴代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style type="text/css">

*{margin: 0;padding: 0}

.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}

.child{position: relative;height:100%;border-radius:inherit;}

.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;

animation: process 1s linear forwards ;

}

@keyframes process

{

0%{

left:0;right:100%;

}

20%{

right:80%

}

40%{

right:60%;

}

60%{right:40%;}

80%{right:20%;}

100%{right:0;}

}

</style>

</head>

<body>

<div class="box">

<div class="child" style="width:50%"> // child的百分比就是进度条的占比效果

<p class="process-animate"></p>

</div>

</div>

</body>

</html>

效果图（复制代码可查看动态效果）：

正常情况下，百分比肯定是根据后台数据进行计算得出的，所以是动态传入的，下面贴vue代码

进度条子组件（progress.vue）：

<template>

<div class="process-wrapper" :class="{'addGray':addGray}">

<div class="process-child" ref="processChild">

<p class="process-animate" :class="{'addGray':addGray}"></p>

</div>

</div>

</template>

<script>

export default {

props: {

addGray: {

//置灰

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38562392

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip