css3实现加载进度条的效果(二)

最新推荐文章于 2024-09-18 16:43:04 发布

风清云淡_A

最新推荐文章于 2024-09-18 16:43:04 发布

阅读量329

点赞数

分类专栏： css js原生知识案例文章标签： css3 animation

本文链接：https://blog.csdn.net/qq_27702739/article/details/119336406

版权

js原生知识案例同时被 2 个专栏收录

91 篇文章 2 订阅

订阅专栏

css

15 篇文章 2 订阅

订阅专栏

css3实现光效加载的进度条，下面来看实现方法!
请添加图片描述

 	<div class="progress-bar orange shine">
        <span id="blue"></span>
    </div>

主要的css代码

.progress-bar {
            width: 350px;
            background-color: #1a1a1a;
            height: 35px;
            margin: 70px auto 0;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        }

        .progress-bar span {
            display: inline-block;
            height: 100%;
            border-radius: 3px;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            transition: width .4s ease-in-out;

        }

实现橙色bar的光效

      .orange span {
            background-color: #fecf23;
            background-image: linear-gradient(top, #fecf23, #fd9215);
            text-align: center;
            line-height: 2;
            color: #fff;
        }


        .shine span {
            position: relative;
        }

        .orange span::after {
            content: '';
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #fff;
            border-radius: 3px;
            animation: animate-shine 2s ease-out infinite;
        }

关键的动画代码

      @keyframes animate-shine {
            0% {
                opacity: 0;
                width: 0;
            }

            50% {
                opacity: .5;
            }

            100% {
                opacity: 0;
                width: 95%;
            }
        }

进度百分比的实现

let dom = document.getElementById('blue')
            let w = 100;

            let timer = setInterval(() => {
                if (w < 350) {
                    w += 1;
                    dom.innerHTML = Math.floor(w / 350 * 100) + '%'
                    dom.style.width = w + "px"
                } else {
                    alert("加载完毕")
                    clearInterval(timer)
                }
            }, 100)