模拟动态进度条
Posted hmyCheryl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟动态进度条相关的知识，希望对你有一定的参考价值。
<style type="text/css"> .process { width: 10px; height: 18px; background-color: #5bc0de; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-animation: stripes 5s linear infinite; animation: stripes 5s linear infinite; } .processed { padding-right: 100%; -webkit-animation: none; animation: none; } @keyframes stripes { 0% { padding-right: 1%; } 1% { padding-right: 2%; } 3% { padding-right: 4%; } 10% { padding-right: 5%; } 20% { padding-right: 8%; } 30% { padding-right: 30%; } 40% { padding-right: 50%; } 60% { padding-right: 80%; } 80% { padding-right: 100%; } } @-webkit-keyframes stripes {/*Safari and Chrome*/ 0% { padding-right: 1%; } 1% { padding-right: 2%; } 3% { padding-right: 4%; } 10% { padding-right: 5%; } 20% { padding-right: 8%; } 30% { padding-right: 30%; } 40% { padding-right: 50%; } 60% { padding-right: 80%; } 80% { padding-right: 100%; } } </style> <body> <div style="width:500px;height:20px;"> <div id="process" class="process"></div> </div> </body> <script type="text/javascript"> setTimeout(function(){ document.getElementById(‘process‘).className += ‘ processed‘; }, 4000); </script>
以上是关于模拟动态进度条的主要内容，如果未能解决你的问题，请参考以下文章
当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？