close
تبلیغات در اینترنت
دانلود قالب برای وبلاگ , قالب وبلاگ , نوار progress bar , progress , b
X

درباره ی ما

گروه نرم افزاری سافت گروپ در سال 1395 تشکیل شده است . با فعالیت در زمینه های برنامه نویسی ، گرافیک و آموزش مجازی .

آموزش ساخت متن نئون در فتوشاپ
آموزش ساخت متن نئون در فتوشاپ
شروع یادگیری
گروه نرم افزاری سافت گروپ
گروه نرم افزاری سافت گروپ
گرافیک - برنامه نویسی - آموزش مجازی
گرافیک - برنامه نویسی - آموزش مجازی

کاربر عزیز وارد پنل شوید
نام کاربری :
رمز عبور :
رمز عبور خود را فراموش کرده اید؟
کد نوارپیشرفت ( Progress Bar ) برای وبسایت

نوار پیشرفت نواریست که درصد پیشرفت برنامه را نشان می دهد . اکنون کد نوار پیشرفت برای وبسایت و وبلاگ آماده شده و در اختیار کاربران عزیز قرار گرفته است . کد ها شامل انواع CSS , HTML و JavaScript می باشد .

 

 

1.ابتدا کد های CSS زیر را در بین تگ های <style> و <style/> موجود در بین تگ های head قرار دهید .

2.کد های HTML و JavaScript را در مکان دلخواه بین تگ های <body> و <body/> قرار دهید .

 


CSS
  #myProgress {
width: 100%;
background-color: #ddd;
}

#myBar {
width: 10%;
height: 30px;
background-color: #218EF9;
text-align: center;
line-height: 30px;
color: white;
}
HTML
<div id="myProgress">
<div id="myBar">10%</div>
</div>

<br>
<button onclick="move()">متن دکمه</button>
JavaScript
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>



برچسب ها : دانلود قالب برای وبلاگ , قالب وبلاگ , نوار progress bar , progress , bar , کد نوار پیشرفت , کد نوار , کد وبسایت , کد وبلاگ ,
بازدید : 24 تاریخ : 26 / 02 / 1396 زمان : 21:34 نویسنده : SOFTGROUP نظرات ()
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی

موضوعات مطالب

آموزشگاه
اندروید
جاوا
پروژه ها
نرم افزار های جانبی
Web Code
ads ads