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

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)

至此就实现了一个光效的进度条!

css3实现加载进度条的效果(二)相关推荐

CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
php 页面加载进度条,HTML5/CSS3 网页加载进度条的实现，下载进度条等经典案例
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
Vue：页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来. cnpm install --save nprogress import ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
android源生进度条,如何使用源生css3实现圆环加载进度条
这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的注意事项有哪些,下面就是实战案例,一起来看一下. 效果图: 当时的要求是让进度条以扇形渐变的效果加载.我想了半 ...
小米视频加载进度条效果实现
原文:小米视频加载进度条效果实现好吧,其实这些都是我闲暇时自己做着玩的,以前总是拿来主义,现在分享一下让我也为大家做一点贡献好了.废话不说了,看效果. 好吧其实没什么技术含量直接上代码好了和我 ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...

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

css3实现加载进度条的效果(二)相关推荐

最新文章

热门文章