نحوه ایجاد یک نوار بارگذاری با استفاده از HTML، CSS و جاوا اسکریپت

ek3nk4r 2024-06-17

0 3 خواندن این مطلب 2 دقیقه زمان میبرد

نحوه ایجاد یک نوار بارگذاری با استفاده از HTML، CSS و جاوا اسکریپت

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

نوارهای بارگذاری عناصر ضروری رابط کاربری هستند که پیشرفت را برای کاربران در طول عملیاتی مانند آپلود فایل، دانلود، یا پردازش داده نشان می‌دهند. در این آموزش، ایجاد یک نوار بارگیری ساده و در عین حال موثر با استفاده از HTML، CSS و جاوا اسکریپت را بررسی خواهیم کرد. این پروژه برای مبتدیانی که به دنبال ارتقای مهارت های توسعه front-end خود هستند یا برای توسعه دهندگان باتجربه ای که می خواهند دانش خود را به روز کنند ایده آل است.

فهرست مطالب

بررسی اجمالی پروژه

در این پروژه، یک نوار بارگذاری ایجاد می کنیم که پیشرفت یک عملیات را شبیه سازی می کند. استفاده خواهیم کرد:

HTML: برای ساختار نوار بارگیری ما.
CSS: برای حالت دادن و متحرک سازی نوار بارگذاری.
جاوا اسکریپت: برای کنترل و به روز رسانی پیشرفت نوار بارگذاری.

راهنمای گام به گام

1. راه اندازی پروژه شما

ابتدا یک دایرکتوری جدید برای پروژه خود ایجاد کنید و فایل های زیر را تنظیم کنید:

index.html: شامل ساختار HTML است.
style.css: ظاهر و انیمیشن را مدیریت می کند.
script.js: منطق به روز رسانی نوار بارگیری را کنترل می کند.

2. ساختار HTML

در شما index.html فایل، ساختار اصلی نوار بارگذاری را تنظیم کنید:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Loading Bar Project<span class="nt"/>
    <span class="nt"><link/> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"/>
    <span class="nt"><div> <span class="na">class=</span><span class="s">"loading-bar-container"</span><span class="nt">></span>
        <span class="nt"><p> <span class="na">class=</span><span class="s">"loading-bar"</span> <span class="na">id=</span><span class="s">"loadingBar"</span><span class="nt">></span></p></span>
    <span class="nt"/></div></span>

    <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"script.js"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"/>
</span></span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید



  3. CSS Styling


در مرحله بعد، نوار بارگذاری خود را با استفاده از آن استایل دهید style.css.  در اینجا مثالی از نحوه استایل و متحرک سازی نوار بارگذاری آورده شده است:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.loading-bar-container {
    width: 300px;
    height: 20px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.loading-bar {
    width: 0%;
    height: 100%;
    background-color: #4caf50;
    transition: width 0.3s ease;
}



    
    




  4. منطق جاوا اسکریپت


اکنون، عملکردی را اضافه کنید تا پیشرفت بارگذاری به صورت پویا در آن به‌روزرسانی شود script.js:

// Get the loading bar element
const loadingBar = document.getElementById('loadingBar');

// Function to simulate loading progress
function simulateProgress() {
    let width = 0;
    const interval = setInterval(() => {
        if (width >= 100) {
            clearInterval(interval);
        } else {
            width++;
            loadingBar.style.width = width + '%';
        }
    }, 30); // Adjust speed of progress bar here (in milliseconds)
}

// Call simulateProgress function to start the loading animation
simulateProgress();



    
    




  نتیجه


تبریک می گویم!  شما با موفقیت یک پروژه نوار بارگذاری را با استفاده از HTML، CSS و جاوا اسکریپت ساخته اید.  این پروژه نه تنها درک شما از اصول توسعه front-end را افزایش می دهد، بلکه شما را با مهارت های ضروری برای ایجاد رابط های کاربری پویا مجهز می کند.
با افزودن ویژگی‌هایی مانند رنگ‌های مختلف، تنظیمات طراحی واکنش‌گرا، یا ادغام آن با عملیات پشتیبان برای برنامه‌های دنیای واقعی، پروژه را بیشتر سفارشی کنید.
منتظر آموزش ها و پروژه های بیشتر برای تعمیق مهارت های خود در توسعه وب باشید.  کد نویسی مبارک!