等待进度条---三个圆点一排间隔放大缩小动画

本文介绍了一种实现等待进度条的动画效果,通过三个圆点依次放大缩小来展示加载过程。这种动画能提升用户体验,使得用户在等待时有所反馈。
摘要由CSDN通过智能技术生成
public class ProgressUtils {
   
    View dialogview;
    private ImageView iamge1,iamge2,iamge3;
    Dialog progress ;
    public ProgressUtils(Context context){
        progress = new Dialog(context,R.style.CustomDialog);
        dialogview= LayoutInflater.from(context).inflate(R.layout.pdialog,null);
        iamge1=(ImageView)dialogview.findViewById(R.id.dialog1);
        iamge2=(ImageView)dialogview.findViewById(R.id.dialog2);
        iamge3=(ImageView)dialogview.findViewById(R.id.dialog3);
        final   Animation largeranimation1 = AnimationUtils.loadAnimation(context, R.anim.larger);
        final   Animation largeranimation2 = AnimationUtils.loadAnimation(context, R.anim.larger);
        final   Animation largeranimation3 = AnimationUtils.loadAnimation(context, R.anim.larger);
        final   Animation smallanimation1 = AnimationUtils.loadAnimation(context, R.anim.small);
        final   Animation smallanimation2 = AnimationUtils.loadAnimation(context, R.anim.small);
        final   Animation smallanimation3 = AnimationUtils.loadAnimation(context, R.anim.small);
        iamge1.startAnimation(largeranimation1);
        new Handler().postDelayed(new Runnable(
Vue Element-UI的`el-progress`组件是一个用于展示加载进度的组件,但它本身并不直接提供在进度条结尾添加发光小圆点的功能。不过,你可以通过一些自定义的方式来实现这个效果。例如,可以借助Element-UI的自定义指令或者在进度条外部再包裹一层div,并结合CSS动画技术来达到目的。 一种可能的做法是: 1. 定义一个名为`circle-loading`的自定义指令,当进度条达到100%时,显示发光小圆点: ```html <template> <el-progress :percentage="progress" class="custom-progress"> <span v-if="progress === 100" v-circle-loading></span> </el-progress> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ directives: { circleLoading: { inserted(el) { el.addEventListener('transitionend', () => { if (el.style.width === '100%') { const dot = document.createElement('i'); // 设置发光小圆点的样式 dot.classList.add('circle-dot'); el.parentNode.appendChild(dot); } }); }, componentUpdated() {}, unbind() { el.removeEventListener('transitionend', this.onTransitionEnd); }, }, }, data() { return { progress: 0, }; }, }); </script> <style scoped> .custom-progress > span.circle-dot { position: absolute; bottom: 10px; /* 根据需要调整位置 */ right: 10px; /* 根据需要调整位置 */ background-color: red; /* 发光颜色 */ border-radius: 50%; width: 10px; height: 10px; transition: all 0.3s ease; } </style> ``` 在这个例子中,当进度达到100%,`circle-loading`指令会在进度条后插入一个小圆点,并设置相应的CSS样式使其发光。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值