حصريا اضافة خاصية الانتظار بشكل احترافي


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

الان الاضافة
اذهب الى قالب
تحرير html

ابحث باستخدام
ctrl+f
ابحث عن
<head/>
اضف الكود التالي فوقه مباشرة

<script src='https://arlina-design.googlecode.com/svn/progressbar.js'/>
وبعدها اختر ما يناسبك
اضف الكود فوق <style/>
 الكود
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background-color: #29d; position: fixed; z-index: 2000; top: 0; left: 0; height: 12px; overflow: hidden; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } .pace .pace-progress-inner { position: absolute; top: 0; left: 0; right: -32px; bottom: 0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-background-size: 32px 32px; -moz-background-size: 32px 32px; -o-background-size: 32px 32px; background-size: 32px 32px; -webkit-animation: pace-stripe-animation 500ms linear infinite; -moz-animation: pace-stripe-animation 500ms linear infinite; -ms-animation: pace-stripe-animation 500ms linear infinite; -o-animation: pace-stripe-animation 500ms linear infinite; animation: pace-stripe-animation 500ms linear infinite; } @-webkit-keyframes pace-stripe-animation { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); } } @-moz-keyframes pace-stripe-animation { 0% { -moz-transform: none; transform: none; } 100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); } } @-o-keyframes pace-stripe-animation { 0% { -o-transform: none; transform: none; } 100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); } } @-ms-keyframes pace-stripe-animation { 0% { -ms-transform: none; transform: none; } 100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); } } @keyframes pace-stripe-animation { 0% { transform: none; transform: none; } 100% { transform: translate(-32px, 0); transform: translate(-32px, 0); } }

احفظ القالب وانظر النتيجة


الكود
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace.pace-inactive .pace-progress { display: none; } .pace .pace-progress { position: fixed; z-index: 2000; top: 0; right: 0; height: 5rem; width: 5rem; } .pace .pace-progress:after { display: block; position: absolute; top: 0; right: .5rem; content: attr(data-progress-text); font-family: "Helvetica Neue", sans-serif; font-weight: 100; font-size: 5rem; line-height: 1; text-align: right; color: rgba(0, 0, 0, 0.19999999999999996); }

ايضا احفظ القالب


الكود
.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-perspective: 12rem; -moz-perspective: 12rem; -ms-perspective: 12rem; -o-perspective: 12rem; perspective: 12rem; z-index: 2000; position: fixed; height: 6rem; width: 6rem; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .pace.pace-inactive .pace-progress { display: none; } .pace .pace-progress { position: fixed; z-index: 2000; display: block; position: absolute; left: 0; top: 0; height: 6rem; width: 6rem !important; line-height: 6rem; font-size: 2rem; border-radius: 50%; background: rgba(34, 153, 221, 0.8); color: #fff; font-family: "Helvetica Neue", sans-serif; font-weight: 100; text-align: center; -webkit-animation: pace-3d-spinner linear infinite 2s; -moz-animation: pace-3d-spinner linear infinite 2s; -ms-animation: pace-3d-spinner linear infinite 2s; -o-animation: pace-3d-spinner linear infinite 2s; animation: pace-3d-spinner linear infinite 2s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .pace .pace-progress:after { content: attr(data-progress-text); display: block; } @-webkit-keyframes pace-3d-spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(360deg); } } @-moz-keyframes pace-3d-spinner { from { -moz-transform: rotateY(0deg); } to { -moz-transform: rotateY(360deg); } } @-ms-keyframes pace-3d-spinner { from { -ms-transform: rotateY(0deg); } to { -ms-transform: rotateY(360deg); } } @-o-keyframes pace-3d-spinner { from { -o-transform: rotateY(0deg); } to { -o-transform: rotateY(360deg); } } @keyframes pace-3d-spinner { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
احفظ القالب واعطنا النتيجة

انتهى درسنا
لا تنسى بضغط لايك لصفحتنا على الفيس بوك
وعلق اذا استفدت من الدرس


قد يعجيك هذا أيضًا

هناك تعليقان (2):

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي