آموزش ساخت Loading Bar
سلام خدمت همه دوستان عزیز و همراهان نت کپی، با یک پست آموزشی از سری پست های آموزش رایگان برنامه نویسی در خدمت شما هستیم با آموزش ساخت Loading Bar به کمک html css javascript
پس در ادامه این آموزش همراه باشید
با آموزش ساخت Loading Bar در خدمت شما هستیم
ابتدا یک فایل با نام index.html میسازیم و کد های زیر را داخلش قرار میدیم
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نت کپی - مرجع قالب و اسکریپت فارسی</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="progress-bar"></div> <h1 class="count"></h1> <script src="scripts.js"></script> </body> </html>
سپس یک فایل با نام style.css میسازیم و کد هایی Css زیر را داخلش قرار میدیم
body, html { padding: 0; margin: 0; height: 100%; overflow: hidden; } .progress-bar { position: absolute; top: 50%; height: 2px; background: #1d84d3; } .count { position: absolute; top: 50%; width: 100%; text-align: center; font-weight: 100; font-size: 3em; margin-top: -1.33em; color: #1d84d3; } .done { top: 0; height: 100%; width: 100%; transition: all .33s ease; }
در مرحله آخر به سراغ جاوا اسکریپت میریم یک فایل با نام script.js میسازیم و کد های js زیر را داخلش قرار میدیم
var body = document.querySelector('body'), bar = document.querySelector('.progress-bar'), counter = document.querySelector('.count'), i = 0, throttle = 0.7; (function draw(){ if(i <= 100) { var r = Math.random(); requestAnimationFrame(draw); bar.style.width = i + '%'; counter.innerHTML = Math.round(i) + '%'; if(r < throttle) { i = i+ r; } }else {; bar.className += " done"; } })();
به همین سادگی ما تونستیم یک Loading Bar زیبا طراحی کنیم امید وارم خوشتون اومده باشه 🙂
نظرات و پیشنهادات خود را از انتهای همین پست از قسمت نظرات با ما در میان بگذارید.
با تشکر:)
نت کپی- مرجع دانلود قالب و اسکریپت فارسی
شما میتونید سورس این پروژه رو به صورت رایگان دانلود کنید
آموزش ویدیویی طراحی این قالب
ممنون آموزش خوب و کاربردی بود
خواهش میکنم دوست عزیز خوشحالیم که این آموزش بدردتون خورده