نوار پیشرفت دور Css. ایجاد نوار پیشرفت با HTML

بنابراین، برای تغییر سبک نوار پیشرفت و نوار لغزنده در این مرورگرها، باید این شبه کلاس ها را اضافه کنیم.

Progress::-webkit-progress-bar ( /* قوانین سبک */ ) progress::-webkit-progress-value ( /* قوانین سبک */)

فایرفاکس همچنین دارای یک کلاس شبه ::-moz-progress-bar است. برخلاف کروم و سافاری، این شبه کلاس در فایرفاکس به اسلایدر اشاره دارد.

پیشرفت::-moz-progress-bar ( /* قوانین سبک */ )

در نهایت این انتخابگرها را کنار هم قرار دادیم تا به نوار پیشرفت استایل دهید.

پیشرفت ( /* قوانین سبک */ ) progress::-webkit-progress-bar ( /* style rules */ ) progress::-webkit-progress-value ( /* style rules */ ) progress::-moz-progress -bar ( /* قوانین سبک */ )

انیمیشن پیشرفت

در مرحله بعد، نحوه متحرک سازی نشانگر را خواهیم دید. به عنوان یک قاعده، با پیشرفت کار، نوار لغزنده از چپ به راست رشد می کند. ایده این است که نوار لغزنده از 0 افزایش می یابد و به محض رسیدن متوقف می شود حداکثر مقدار. با حرکت دادن نوار لغزنده، مقدار عدد را نیز نمایش خواهیم داد. در زیر ساختار HTML آمده است.

در این مثال، ما از jQuery برای متحرک سازی نوار پیشرفت استفاده خواهیم کرد، بنابراین مطمئن شوید که jQuery را به این صورت قرار دهید.

سپس یک اسکریپت برای افزایش پیشرفت اضافه می کنیم. ابتدا اجازه دهید خود عنصر، مقدار حداکثر و فعلی و دوره زمانی را در متغیرها ذخیره کنیم.

var progressbar = $("#progressbar")، max = progressbar.attr("max")، value = progressbar.val()، time = (1000/max)*5;

سپس یک متغیر ایجاد می کنیم که تابع انیمیشن را نگه می دارد. در این مثال به آن می گویند.

در داخل این تابع، مقدار increment را تعیین می کنیم. ما مقدار را برای هر دوره زمانی 1 افزایش می دهیم - می توانید این عدد را افزایش دهید تا لغزنده سریعتر حرکت کند.

مقدار += 1;

سپس نتیجه را به نشانگر اضافه کنید.

AddValue = progressbar.val(value);

و مقدار را در کنار نوار پیشرفت نشان می دهیم.

$(".progress-value").html(value + "%");

در این مرحله، انیمیشن در حال حاضر در حال پیشرفت است، اما ارزش آن به طور نامحدود افزایش می یابد. بنابراین باید ایجاد کنید عملگر شرطیبرای اینکه انیمیشن زمانی که انیمیشن به حداکثر مقدار خود رسید متوقف شود.

بیایید تابع فوق را در یک متغیر ذخیره کنیم.

Var animate = setInterval(function() ( loading(); ), time);

سپس یک عبارت شرطی را داخل متغیر اضافه می کنیم.

برای ایجاد یک نوار پیشرفت، شما فقط به دو بلوک DIV و سبک های مربوط به آنها نیاز دارید، و یک بلوک در بلوک دیگری تودرتو می شود و دقیقاً به اندازه درصد عملیات فعلی (رویداد فعلی) کامل شده است، آن را با رنگ دیگری پر می کند. .

سبک های بلوک نوار پیشرفت:

لطفاً توجه داشته باشید که کد HTML همچنین از سبکی استفاده می کند که عرض بلوک تودرتو را نشان می دهد. style="width:75px"این سبک است که نشان می دهد درصدی که بلوک اصلی پر می شود. این نیز راحت است زیرا اگر صفحه به عنوان مثال توسط PHP ایجاد شود، می توانید هر مقدار طول بلوک داخلی را وارد کنید.

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

در نهایتما یک نوار پیشرفت جهانی داریم که در تمام مرورگرهای مدرن و همچنین در IE6 قدیمی Donkey کار می کند. ما می توانیم آن را به هر رنگ، اندازه و توضیحات تنظیم کنیم.

jQuery یک کتابخانه جاوا اسکریپت است که ایجاد عناصر UI مانند نوارهای پیشرفت، بازشوها و غیره را بسیار آسان می کند.

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

jQuery و JavaScript ممکن است توسط مرورگرهای قدیمی پشتیبانی نشوند، اما مرورگرهای مدرنبه طور کامل از آنها حمایت کنید.

بررسی نوار پیشرفت

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

دانلود

نوار پیشرفت پیکسل

یک نشانگر کوچک مربعی تزئینی در انتهای نوار پیشرفت، این نوار پیشرفت را از نظر بصری بسیار جذاب تر می کند.

دانلود

سرعت - نوار پیشرفت بارگذاری خودکار صفحه

نوار پیشرفت خودکار صفحه وب. pace.js و تم مورد نظر خود را در صفحه خود قرار دهید و کارتان تمام شد! Pace به‌طور خودکار درخواست‌های Ajax، تأخیر حلقه رویداد، وضعیت آمادگی سند و عناصر موجود در صفحه را دنبال می‌کند تا شما را از پیشرفت کار مطلع کند.

نسخه ی نمایشی |دانلود

دکمه هایی با شمارنده های پیشرفت داخلی

آنها برای نمایش پیشرفت یک کار هنگام ارائه یک فرم یا بارگیری محتوا از طریق AJAX ایده آل هستند. آنها همچنین می توانند از سبک ها و ترانزیشن های CSS3 استفاده کنند، که سفارشی کردن آنها را آسان می کند.

نسخه ی نمایشی |دانلود

افزونه Animated Goal Progress Bar jQuery

این افزونه به شما امکان می دهد نوارهای پیشرفت متحرک ایجاد کنید مبتنی بر جی کوئری. فقط داده های مورد نیاز را پر کنید تا افزونه به طور خودکار پیشرفت کار را محاسبه کرده و انیمیشن پنل مناسب را تنظیم کند. می توانید متنی را مشخص کنید که قبل و بعد از رسیدن به درصد مشخصی از کار نمایش داده شود.

نسخه ی نمایشی |دانلود

سبک های دکمه پیشرفت رایگان

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

نسخه ی نمایشی |دانلود

ProgressJs - کتابخانه نوار پیشرفت مضمون

ProgressJs یک کتابخانه برای مبتنی بر جاوا اسکریپتو CSS3، که به توسعه دهندگان کمک می کند تا نوارهای پیشرفت را برای هر شی در صفحه ایجاد و مدیریت کنند.

نسخه ی نمایشی |دانلود

ngProgress - نوار پیشرفت سبک یوتیوب

ngProgress برای نمایش وضعیت بارگیری چیزی استفاده می شود. این عنصرمی تواند برای نشان دادن استخراج داده ها استفاده شود منابع خارجیاگر اجرا بیش از حد معمول طول بکشد، یا اگر صفحه به سادگی در حال بارگیری است. عمدتا برای نمایش وضعیت دانلود فایل های حجیم استفاده می شود.

نسخه ی نمایشی |دانلود

نوار پیشرفت CSS خالص

این نوار پیشرفت به طور کامل با استفاده از گرادیان‌های CSS3، سایه‌ها و شعاع مرزی با لمس انیمیشن پیاده‌سازی می‌شود. هدف این پروژهنمایشی از قدرت CSS3 در مرورگرهای وب مدرن است. بنابراین، سبک‌های این نوار پیشرفت منحصراً با استفاده از CSS تنظیم می‌شوند.

نسخه ی نمایشی |دانلود

NProgress - نوار پیشرفت نازک

« نانوسکوپی" نوار پیشرفت. با استفاده از جلوه های واقع بینانهانیمیشن ها، به کاربران نشان می دهید که برخی کارها در حال انجام است! الهام بخش نویسنده در محیط گوگل، یوتیوب استخراج شد.

دانلود

پیشرفت دایره ای

ویجت پیشرفت جاوا اسکریپت دایره ای، بسیار آسان برای پیاده سازی و سفارشی سازی.

دانلود

Nanobar.js

نوار پیشرفت بسیار بسیار فشرده ( بایگانی تنها 730 بایت در اندازه). نیازی به نصب جی کوئری ندارد.

نسخه ی نمایشی |دانلود

بارگذاری زاویه ای

ایده ساده است: هر زمان که درخواست XHR ارائه شد، یک نوار پیشرفت بارگیری اضافه کنید. چندین درخواست در حال اجرا به طور همزمان را می توان در یک پانل جمع آوری کرد به گونه ای که هر پاسخ نوار پیشرفت را متناسب با آن افزایش دهد.

نسخه ی نمایشی |دانلود

درصد لودر جی کوئری رایگان

jQuery.PercentageLoader یک پلاگین جی کوئری برای نمایش نوار پیشرفت جذاب تر از نوار پیشرفت افقی معمول و شمارنده متن است. نصب این افزونه آسان است و استفاده از آن کاملاً انعطاف پذیر است. از بوم های HTML5 استفاده می کند، که به شما امکان می دهد چشمگیر خلق کنید نمایش گرافیکی، تنها با استفاده از 10 کیلوبیت ( به حداقل رساند) فایل جاوا اسکریپت ( با برنامه اختیاری فونت وب).

این افزونه به جای تصاویر از وکتورها استفاده می کند و باز کردن آن را آسان می کند عناصر مختلف ویرایش سادهتنظیمات اولیه

نسخه ی نمایشی |دانلود

نوار پیشرفت دایره ای رایگان - پلاگین jQuery

نوار پیشرفت دایره ای امکانات نامحدودی را برای نشان دادن جریان آپلود یا دانلود فراهم می کند.

نسخه ی نمایشی / دانلود

نوار پیشرفت ساده jQuery CSS3

این نوار پیشرفت از ویژگی سفارشی data-* HTML5 استفاده می‌کند که به راحتی می‌توان نوار پیشرفت را با استفاده از Zepto (یا JQuery) متحرک کرد. انیمیشن در تابع window.resize بسته بندی می شود تا در صورت تغییر اندازه پنجره مرورگر، دوباره اجرا شود.

نسخه ی نمایشی |دانلود

نوار پیشرفت 5 مرحله ای CSS

نوار پیشرفت CSS 5 مرحله ای. JS فقط برای متحرک سازی نسخه ی نمایشی استفاده می شود.

نسخه ی نمایشی |دانلود

نوار پیشرفت جی کوئری برای تکمیل نمایه

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

ما بلافاصله توجه می کنیم که هیچ تصویری در اینجا وجود ندارد، بلکه فقط ویژگی های CSS3 وجود دارد! از آنجایی که سازنده یک طراح حرفه ای است، او عملکرد بازگشتی را برای نسخه های قدیمی مرورگرها نیز در نظر گرفت. این همان چیزی است که نوارها در Opera 11 به نظر می رسند، که فقط از برخی از گزینه های CSS3 پشتیبانی می کند، اما نه همه.

احتمالاً قبلاً حدس زده‌اید که در مرورگرهایی که اصلاً از CSS3 پشتیبانی نمی‌کنند، نوارها تقریباً یکسان به نظر می‌رسند، اما حتی ساده‌تر.

HTML پایه

نوار خود یک div با یک کلاس است. در داخل آن، یک دهانه قرار می دهیم که به عنوان منطقه "پر شده" نوار پیشرفت عمل می کند. این را می توان از طریق یک ظاهر طراحی داخلی به دست آورد. در اینجا ما به نوار نیاز داریم تا بفهمیم چقدر باید پر باشد، و اینجاست که عناصر درون خطی وارد عمل می شوند. گزینه جایگزین CSS دارای کلاس هایی مانند "fill-10-%)، "fill-one-third" و غیره خواهد بود.

بنیاد:

شروع CSS

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

متر ( ارتفاع: 20 پیکسل؛ /* می تواند هر چیزی باشد */ موقعیت: نسبی؛ پس زمینه: #555؛ -moz-border-radius: 25px؛ -webkit-border-radius: 25px؛ border-radius: 25px؛ padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)؛ -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); ,0.3)؛

Span داخل قسمتی از نوار پیشرفت را پر می کند. ما نمایشگر را روی نوع بلوک با پارامتر ارتفاع 100٪ تنظیم می کنیم. بنابراین، به کل منطقه موجود کشیده می شود. در مرحله بعد، از مقداری کد CSS3 برای ایجاد درجه بندی و گوشه های گرد استفاده می کنیم.

Meter > span (نمایش: بلوک؛ ارتفاع: 100٪؛ -webkit-border-بالا-راست-شعاع: 8px؛ -webkit-border-bottom-right-radius: 8px؛ -moz-border-radius-topright: 8px. -moz-border-radius-bottomright: 8px؛ حاشیه-بالا-راست-شعاع: 8px؛ حاشیه-پایین-راست-شعاع: 8px؛ -webkit-border-بالا-چپ-شعاع: 20px؛ -webkit-border-bottom شعاع چپ: 20 پیکسل؛ -moz-border-radius-toleft: 20px؛ -moz-border-radius-bottomleft: 20px؛ حاشیه-بالا-چپ-شعاع: 20px؛ حاشیه-پایین-چپ-شعاع: 20px؛ پس زمینه -color: rgb(43,194,83)؛ تصویر پس‌زمینه: -webkit-gradient (خطی، پایین سمت چپ، بالا سمت چپ، color-stop(0، rgb(43،194،83))، 84)))، تصویر پس‌زمینه: -moz-linear-gradient(پایین مرکز، rgb(43،194،83) 37%, rgb(84،240،84) 69%)؛ -webkit-box-shadow: inset 0 2px 9px -moz-box-shadow: inset 0 2px 9px rgba (255,255,255,0.3)، داخل 0 -2px 6px rgba(0, 0,0,0.4)؛ موقعیت: نسبی؛ سرریز: پنهان؛ ) رنگ‌های دیگر Dove تغییر رنگ بسیار آسان است. فقط یک کلاس به نام "نارنجی" یا "قرمز" را به wrapper div اضافه کنید و رنگ آن تغییر خواهد کرد. .orange > span ( پس‌زمینه رنگ: #f1a165؛ تصویر پس‌زمینه: -moz-linear-gradient (بالا، #f1a165، #f36d0a)؛ تصویر پس‌زمینه: -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، رنگ -stop(0, #f1a165),color-stop(1, #f36d0a))؛ تصویر پس‌زمینه: -webkit-linear-gradient(#f1a165, #f36d0a)؛ تصویر پس‌زمینه: -moz-linear-gradient( بالا، #f0a3a3، #f42323)؛ تصویر پس‌زمینه: -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، رنگ-توقف (0، #f0a3a3)، رنگ- توقف (1، #f42323))، تصویر پس‌زمینه : -webkit-linear-gradient(#f0a3a3, #f42323);)

راه راه

همچنین می‌توانیم با افزودن یک عنصر دیگر در بالای دهانه خود و دادن یک گرادیان CSS تکراری، یک افکت «راه راه» جذاب اضافه کنیم. از نظر معنایی، بهتر است این کار با یک شبه عنصر انجام شود، پس بیایید این کار را انجام دهیم. ما به آن یک موقعیت مطلق در یک منطقه خاص از دهانه خود می دهیم (که قبلاً یک مقدار موقعیت نسبی دارد) و سپس گوشه ها را گرد می کنیم تا راه راه ها ناخوشایند به نظر نرسند.

Meter > span:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ چپ: 0؛ پایین: 0؛ راست: 0؛ پس‌زمینه-تصویر: -webkit-gradient(خطی، 0 0، 100% 100% color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255 , 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent))؛ -moz-linear -gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75٪، شفاف 75٪، شفاف)؛ z-index: 1؛ -webkit-background-size: 50px 50px؛ -moz-background-size: 50px 50px؛ -webkit-animation: move 2s linear infinite؛ - webkit-border-top-right-radius: 8px؛ -webkit-border-bottom-right-radius: 8px؛ -moz-border-radius-to-right: 8px؛ -moz-border-radius-bottomright: 8px ؛ حاشیه-بالا -راست-شعاع: 8px؛ حاشیه-پایین-راست-شعاع: 8px؛ -webkit-border-بالا-چپ-شعاع: 20px؛ -webkit-bor شعاع در-پایین-چپ: 20 پیکسل؛ -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; شعاع حاشیه-بالا-چپ: 20 پیکسل؛ شعاع حاشیه-پایین-چپ: 20 پیکسل. سرریز: پنهان )

متحرک سازی راه راه

اکنون فقط فایرفاکس 4 می تواند شبه عناصر را متحرک کند و فقط مرورگرهای خانواده Webkit می توانند انیمیشن افزایشی را انجام دهند. بنابراین متاسفانه ما توانایی زیادی برای متحرک سازی این راه راه ها نداریم. اگر هنوز نیاز به ساخت یک انیمیشن دارید، بیایید یک بازه دیگر اضافه کنیم و از خانواده مرورگرهای Webkit بخواهیم آن را متحرک کنند.

دهانه با عنصر شبه یکسان خواهد بود، بنابراین ما فقط از همان مقادیر استفاده می کنیم...

Meter > span:after، .animate > span > span (

و سعی کنید از تکراری شدن جلوگیری کنید:

Animate > span:after (نمایش: هیچ؛ )

@-webkit-keyframes ( 0% ( پس‌زمینه موقعیت: 0 0; ) 100% ( موقعیت پس‌زمینه: 50px 50px؛ ))

اسمش را انیمیشن بگذاریم:

Meter > span:after، .animate > span > span ( -webkit-animation: move 2s linear infinite; )

ممکن است ارزش آن را داشته باشد که انیمیشن را به شبه عنصر نیز متصل کنید تا به محض پشتیبانی مرورگرهای Webkit از این ویژگی، کار کند.

انیمیشن با عرض پر شده

متأسفانه، شما نمی توانید یک عنصر را در عرض خودکار یا طبیعی متحرک کنید، که احتمالاً به عناصر درون خطی امکان می دهد متحرک شوند.

@-webkit-animation expandWidth ( 0% ( عرض: 0; ) 100% ( عرض: خودکار؛ ) )

نویسنده این عنصر را برای ردیاب‌های اشکال همه مرورگرهای محبوب تطبیق داده است، اما در حال حاضر پشتیبانی نمی‌شود. در عوض، بیایید از jQuery استفاده کنیم. عرض اصلی را تنظیم کنید، آن را به صفر فشار دهید و سپس متحرک سازی کنید:

$(".meter > span").each(function() ($(this) .data("origWidth", $(this).width()) .width(0) .animate(( عرض: $(this ).data("origWidth") ), 1200); ));

خودشه!