قالب رایگان HTML پله بر پایه Preloader

یک قالب رایگان HTML ساده اما واکنشگرا بدون استفاده از فریمورک و دارای یک سبک مینیمال با 3 مدل Preloader جذاب در هر دمو ! هدف از ارائه قالب رایگان پله ، ارائه دموهای مختلفی از Preloader در ابتدای قالب است . اگر اطلاع داشته باشید و دموی قالب را مشاهده ، و البته تصاویر زیر را نیز نگاهی بیندازید این پوسته شامل 3 دمو با Preloader های حالت progress و spin و dot است که از متداول‌ترین حالت‌های پیش بارگذاری در صفحه است .

از آنجایی که ساختن Preloader در صفحه سایت ، نیازمند دستورات جاوا اسکریپت نیز هست از این جهت سعی کردیم تا در ساده‌‌ترین حالت ممکن یک کد جاوا اسکریپتی خدمتتان ارائه کنیم و شما صرفا با استفاده از چندخط کد ساده ، یک Preloader جذاب طراحی کنید .

توجه داشته باشید که این قالب فاقد هرگونه کتابخانه اضافی CSS و یا jQuery است از این جهت به شما نشان دادیم که می‌توانید بسادگی ، یک طرح منظم و جذاب که در همه وب سایت‌ها وجود دارد را در پوسته خودتان ایجاد کنید . به نمونه تصاویر این قالب دقت کنید که از بخش Preloader و همچنین داخل پوسته خدمت شما ارائه شده است :

شما می‌توانید این پوسته را دانلود کرده و از آن جهت معرفی شرکت و کسبوکار خود در قالب یک سایت تک صفحه استفاده کنید چراکه این پوسته دارای بخش معرفی خدمات ، درباره ما و قسمت تماس است که باتوجه به اینکه قالب HTML است می‌توانید بسادگی متن‌های داخل آن را ویرایش کنید . فونت استفاده شده در داخل این پوسته ، فونت مربع است .

قالب رایگان HTML پله یک پوسته فوق سبک است و اگر یک سایت نوپا دارید می‌توانید همین قالب را دانلود کرده و روی هاست خودتان قرار دهید . قالب رایگان HTML پله یکی از ده‌ها قالبی است که سئو نود جهت استفاده کاربران در سایت خودشان و یا دانشجویان جهت آموزش و توسعه قرار داده است .

برای مثال در این قالب کدی که جهت بخش لودر ابتدای سایت قرار داده شده است بصورت زیر است :

document.addEventListener('DOMContentLoaded', function() {
    const preloader = document.getElementById('preloader');
    const content = document.getElementById('content');
    const progress = document.getElementById('progress');
    
    let width = 0;
    const interval = setInterval(function() {
        width += Math.random() * 15;
        if (width >= 100) {
            width = 100;
            clearInterval(interval);
               
            setTimeout(function() {
                preloader.classList.add('hidden');
                content.classList.add('visible');
            }, 500);
        }
        progress.style.width = width + '%';
    }, 200);
});

البته که این کد تنها بخشی از این پوسته است و با این هدف قرار داده شده است که چنانچه نیاز به کد پیش نمایش ابتدای صفحه داشتید از کدی که در بالا قرار داده شده است استفاده کنید . طراحی و کدهای بخش CSS نیز در این پوسته مهم است . اگر نیازمند پوسته‌های بیشتری هستید حتما از منو اصلی سایت قسمت قالب‌های رایگان HTML را مشاهده کرده و سایر پوسته‌های HTML را نیز استفاده کنید .

چگونه قالب HTML پله را توسعه داده یا تغییر دهیم ؟

این قالب تماما با HTML و CSS نوشته شده است و هیچ کتابخانه دیگری در آن به کار نرفته است از این جهت توسعه آن برای افراد مبتدی که صرفا تسلط بر HTML و CSS دارند بسیار بسیار ساده است . همچنین میزان کدهای CSS این پروژه بسیار کم بوده و تنها در حد 10 خط از کدهای media استفاده شده است .

این پوسته بصورت واکنشگرا یا همان رسپانسیو است و لذا نیازی به ایجاد واکنشگرایی در آن نیست . شما می‌توانید صرفا با کپی کردن کد المان‌های مدنظر مثل بخش خدمات ، تعداد آنها را افزایش دهید یا متون داخل قالب را به دلخواه خودتان عوض کنید . برای آن دسته از عزیزانی که آشنایی با HTML نیز ندارند می‌توانند پوسته را داخل یک نرم افزار ویرایشگر متن همچون notepad باز کرده و بخش‌های فارسی نوشته شده داخل قالب را به سلیقه خودشان تغییر دهند . نام این قالب را پله گذاشتیم به این دلیل که شما نیز برای توسعه کسبوکار و سایت خودتان باید پله به پله حرکت کنید و نمی‌توان یک شبه یک سایت فوق العاده کامل داشت ….