loading-css

来源：互联网发布：返800源码编辑：程序博客网时间：2024/05/17 18:48

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>title</title></head><body><style>* {padding: 0; margin: 0; list-style: none; font-family: "microsoft Yahei";}body {background: #000; padding: 50px; color: #fff;}#loading {width: 400px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px;background: linear-gradient(90deg, #09f 0%, #09f 50%, #999 50%, #999 100%);font-size: 20px;}#loading .forward {color: transparent;background: linear-gradient(90deg, #fff 0%, #fff 50%, #09f 50%, #09f 100%);-webkit-background-clip: text;}</style><div id="loading"><div class="forward">50%</div></div><script>;(function(){var loading=document.querySelector('#loading');var forward=loading.querySelector('.forward');var count=0;setInterval(function(){count++;if(count==100)count=0;loading.style.background='linear-gradient(90deg, #09f 0%, #09f '+count+'%, #999 '+count+'%, #999 100%)';forward.style.backgroundImage='linear-gradient(90deg, #fff 0%, #fff '+count+'%, #09f '+count+'%, #09f 100%)';forward.innerHTML=count+'%';}, 60);})();</script></body></html>

css3

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>title</title></head><body><style>* {padding: 0; margin: 0; list-style: none; font-family: "microsoft Yahei";}body {background: #000; padding: 50px; color: #fff;}#loading {width: 400px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; font-size: 20px; overflow: hidden; position: relative;}#loading div {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}#loading .back {background: #ccc; color: #09f;}#loading .forward {width: 30%; background: #09f; overflow: hidden;}#loading .forward span {position: absolute; left: 0; top: 0;}</style><div id="loading"><div class="back"><span>50%</span></div><div class="forward"><span>50%</span></div></div><script>;(function(){var loading=document.querySelector('#loading');var back=loading.querySelector('.back');var forward=loading.querySelector('.forward');var spanBack=back.querySelector('span');var spanForward=forward.querySelector('span');var count=0;setInterval(function(){count++;if(count==100)count=0;spanForward.innerHTML=spanBack.innerHTML=count+'%';spanForward.style.left=spanBack.offsetLeft+'px';forward.style.width=count+'%';}, 60);})();</script></body></html>

css2

转自妙味课堂摘星

0 0