css实现波浪进度条动画

效果图

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>*{margin: 0;padding: 0;box-sizing: border-box;}.container{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #e2e2e2;}.container .loading{width: 200px;height: 200px;border-radius: 50%;overflow: hidden;background-color: #ffffff;position: relative;display: flex;align-items: center;justify-content: center;}.container .loading .loading-mask{width: 200%;height: 200%;position: absolute;left: -50%;top: 100%;z-index: 1;border-radius: 40%;background-color: rgba(0, 191, 255, 0.8);animation: rotato 10s linear 0s infinite;transition: all 1s;}.container .loading .loading-mask::after{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;border-radius: 36%;overflow: hidden;animation: rotato 11s linear 0s infinite;background-color: rgba(0, 191, 255, 0.6);transform:rotate(0deg);-ms-transform:rotate(0deg);   /* IE 9 */-moz-transform:rotate(0deg);  /* Firefox */-webkit-transform:rotate(0deg); /* Safari 和 Chrome */-o-transform:rotate(0deg);    /* Opera */}.container .loading .loading-mask::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;border-radius: 30%;overflow: hidden;animation: rotato 10s linear 0s infinite;background-color: rgba(0, 191, 255, 0.4);transform:rotate(45deg);-ms-transform:rotate(45deg);     /* IE 9 */-moz-transform:rotate(45deg);     /* Firefox */-webkit-transform:rotate(45deg); /* Safari 和 Chrome */-o-transform:rotate(45deg);  /* Opera */}.container .loading .loading-text{position: relative;z-index: 9;font-size: 50px;color: #f2f2f2;}@keyframes rotato{0% { transform:rotate(0deg);}100% {transform:rotate(360deg);}}</style>
<body><div class="container"><div class="loading"><div id="loadingMask" class="loading-mask"></div><div id="loading" class="loading-text">0%</div></div></div><script>window.onload = function(){var process = 0;setInterval(function(){var mask = document.querySelector("#loadingMask")var loadText = document.querySelector("#loading")var top = 100 - processmask.style.top = top + "%"loadText.innerHTML = process + "%"process = process>=100?0:process+1},1000)}</script>
</body>
</html>

css实现波浪进度条动画相关推荐

css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
Android魔术——手把手教你实现水晶球波浪进度条
目录 1.效果展示 2.波浪函数 3.波浪填充 1)原理分析 2)代码实现 4.实现波浪运动效果 1)实现横向运动 2)实现波浪消退效果 5.总结源码: 1.效果展示本篇文章讲解如何实现一个水晶球 ...
JS框架_(JQuery.js)纯css3进度条动画
百度云盘传送门密码:wirc 进度条动画效果: <!DOCTYPE html> <htmllang="zh"> <head><meta ...
html5圆形提交按钮样式,HTML5 SVG带圆形进度条动画的提交按钮特效
这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效.该提交按钮在被点击之后,按钮变形为一个圆形的进度条,当进度条运行一周之后,可以设置提交成功和提交失败的两种按钮状态. 制作方法 HT ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
android 斑马线进度条,jQuery简单斑马线样式loading进度条动画特效
这是一款非常简单实用的jQuery斑马线样式loading进度条动画特效.该进度条特效通过简单的jQuery代码就完成了可控制的进度条动画特效.斑马线效果使用CSS3来完成,对不支持CSS3的浏览器可 ...
html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的 ...
css实现圆形进度条
css实现圆形进度条先来看一下效果图: 具体实现步骤: 先画一个大圆,底色为#ffffff; <div class="third"> </div> .th ...

css实现波浪进度条动画

效果图

代码

css实现波浪进度条动画相关推荐

最新文章

热门文章