اضافة شريط تحميل مئوي Progress Bar

مرحبا زوار موقع مدون مطور احببت فتح قسم جديد وهو قسم البرمجة هذا القسم الذي سيكون فيه جميع الاضافات او الاكواد البرمجية ونبدا بي درس خفيف وهو عمل شريط مئوي او ما يسمي بـ Progress Bar فائدته انه يفيد الزائر انك لم تنتهي من تطوير موقعك , او تعريبه , او انتهاء , او اي كان يجب استخدام فيه Progress Bar ليعطي مظهر رائع وجمالي

نبدا في المعاينة :-

معاينة شريط المئوي هل اعجبك ؟

لا تقلق سوف تحصل عليه الان مجانا وبدون شروط وسوف نبداء بـ اكواد CSS الاضافة

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.progress-bar-danger {
background-color: #d9534f;
}
.progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

الكود اعلي هو كود المسؤل عن تنسيق الاضافة CSS ويتم اضافته في مكان اكواد تنسيق موقعك Main Css Your Site

او الحل الاخر اضافته بين وسمي <style></style>

الان كود HTML الخاص بالاضافة Progress Bar والذي يجب وضعه مكان ظهور الاضافة

<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">50%</span>
</div>
</div>

لتعديل علي الكود قم بتغير جميع القيم الملونة بالاحمر بالقيم التي تريدها



في النهاية احب ان انوه ان الاضافة ليست تصميمي بل تصميم في موقع بوتستراب وقمت بسحب اكواد Css الخاصة بالاضافة وتطويرها حتي تصبح كما تروها الان بدون استدعاء المكتبة كاملة وفي النهاية هذا مجهود شخصي اتمني عند نقلة تذكر المصدر الاصلي وهو مدون مطور والي هنا نكون انتيهنا