ماشاء الله تبارك الله ماشاء الله لاقوة الا بالله
احلى مصرى نجتمع معاً لنصنع عالم أفتراضى متميز بعبقرية التفكير والتطوير.


لوحة الاعلانات الادارية

اهلاً وسهلاً بك فى
إذا كانت هذه زيارتك الأولى فننصح بالتوجه الىصفحة سياسة احلى مصرى
و إذا لديك لمحة شامله عن سياسة احلى مصرى وتوافق عليها فبإمكانك التسجيل بالضغط هنا

الرئيسيةالرئيسية  صور ومنوعاتصور ومنوعات  اليوميةاليومية  مكتبة الصورمكتبة الصور  س .و .جس .و .ج  بحـثبحـث  التسجيلالتسجيل  دخولدخول  

منتديات احلى مصرى :: احلي مصري للتطوير و المساعدة :: أكواد الـ JavaScript


شاطر

avatar
مؤسس الموقع Admin
مُؤسس احلي مصري
● مُؤسس احلي مصري ●
αнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقف
أوسمة العضو
لم يمُنح اوسمة بعد
αнмєɒ мσнαмєɒ غير متواجد حالياً
   
نورتنا في نورتنا في : 19/08/2013
الدوله الدوله : مصر
الابراج الابراج : السرطان
المشاركات المشاركات : 4063
التقييم التقييم : 22035
العمر العمر : 19
النوع النوع : ذكر

موضوع: شريط تحميل بالاعلى مثل اليوتيوب



كود اكثر من رائع
عند فتح او الانتقال لاى صفحة من موقعك او منتداك يظهر لك
شريط تحميل احمر بالاعلى مثل اليوتيوب
اول خطوة
كود جافا سكربت
يوضع بجميع الصفحات

الكود:
/*! NProgress (c) 2013, Rico Sta. Cruz *  http://ricostacruz.com/nprogress */;(function(factory) {    if (typeof module === 'function') {        module.exports = factory(this.jQuery || require('jquery'));    } else if (typeof define === 'function' && define.amd) {        define(['jquery'], function($) {            return factory($);        });    } else {        this.NProgress = factory(this.jQuery);    }})(function($) {    var NProgress = {};    NProgress.version = '0.1.2';    var Settings = NProgress.settings = {        minimum: 0.08,        easing: 'ease',        positionUsing: '',        speed: 200,        trickle: true,        trickleRate: 0.02,        trickleSpeed: 800,        showSpinner: false,        template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'    };    /**     * Updates configuration.     *     *     NProgress.configure({     *       minimum: 0.1     *     });     */    NProgress.configure = function(options) {        $.extend(Settings, options);        return this;    };    /**     * Last number.     */    NProgress.status = null;    /**     * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.     *     *     NProgress.set(0.4);     *     NProgress.set(1.0);     */    NProgress.set = function(n) {        var started = NProgress.isStarted();        n = clamp(n, Settings.minimum, 1);        NProgress.status = (n === 1 ? null : n);        var $progress = NProgress.render(!started),            $bar = $progress.find('[role="bar"]'),            speed = Settings.speed,            ease = Settings.easing;        $progress[0].offsetWidth; /* Repaint */        $progress.queue(function(next) {            // Set positionUsing if it hasn't already been set            if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();            // Add transition            $bar.css(barPositionCSS(n, speed, ease));            if (n === 1) {                // Fade out                $progress.css({                    transition: 'none',                    opacity: 1                });                $progress[0].offsetWidth; /* Repaint */                setTimeout(function() {                    $progress.css({                        transition: 'all ' + speed + 'ms linear',                        opacity: 0                    });                    setTimeout(function() {                        NProgress.remove();                        next();                    }, speed);                }, speed);            } else {                setTimeout(next, speed);            }        });        return this;    };    NProgress.isStarted = function() {        return typeof NProgress.status === 'number';    };    /**     * Shows the progress bar.     * This is the same as setting the status to 0%, except that it doesn't go backwards.     *     *     NProgress.start();     *     */    NProgress.start = function() {        if (!NProgress.status) NProgress.set(0);        var work = function() {            setTimeout(function() {                if (!NProgress.status) return;                NProgress.trickle();                work();            }, Settings.trickleSpeed);        };        if (Settings.trickle) work();        return this;    };    /**     * Hides the progress bar.     * This is the *sort of* the same as setting the status to 100%, with the     * difference being `done()` makes some placebo effect of some realistic motion.     *     *     NProgress.done();     *     * If `true` is passed, it will show the progress bar even if its hidden.     *     *     NProgress.done(true);     */    NProgress.done = function(force) {        if (!force && !NProgress.status) return this;        return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);    };    /**     * Increments by a random amount.     */    NProgress.inc = function(amount) {        var n = NProgress.status;        if (!n) {            return NProgress.start();        } else {            if (typeof amount !== 'number') {                amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);            }            n = clamp(n + amount, 0, 0.994);            return NProgress.set(n);        }    };    NProgress.trickle = function() {        return NProgress.inc(Math.random() * Settings.trickleRate);    };    /**     * Waits for all supplied jQuery promises and     * increases the progress as the promises resolve.     *     * @param $promise jQUery Promise     */    (function() {        var initial = 0,            current = 0;        NProgress.promise = function($promise) {            if (!$promise || $promise.state() == "resolved") {                return this;            }            if (current == 0) {                NProgress.start();            }            initial++;            current++;            $promise.always(function() {                current--;                if (current == 0) {                    initial = 0;                    NProgress.done();                } else {                    NProgress.set((initial - current) / initial);                }            });            return this;        };    })();    /**     * (Internal) renders the progress bar markup based on the `template`     * setting.     */    NProgress.render = function(fromStart) {        if (NProgress.isRendered()) return $("#nprogress");        $('html').addClass('nprogress-busy');        var $el = $("<div id='nprogress'>")            .html(Settings.template);        var perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0);        $el.find('[role="bar"]').css({            transition: 'all 0 linear',            transform: 'translate3d(' + perc + '%,0,0)'        });        if (!Settings.showSpinner)            $el.find('[role="spinner"]').remove();        $el.appendTo(document.body);        return $el;    };    /**     * Removes the element. Opposite of render().     */    NProgress.remove = function() {        $('html').removeClass('nprogress-busy');        $('#nprogress').remove();    };    /**     * Checks if the progress bar is rendered.     */    NProgress.isRendered = function() {        return ($("#nprogress").length > 0);    };    /**     * Determine which positioning CSS rule to use.     */    NProgress.getPositioningCSS = function() {        // Sniff on document.body.style        var bodyStyle = document.body.style;        // Sniff prefixes        var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :            ('MozTransform' in bodyStyle) ? 'Moz' :            ('msTransform' in bodyStyle) ? 'ms' :            ('OTransform' in bodyStyle) ? 'O' : '';        if (vendorPrefix + 'Perspective' in bodyStyle) {            // Modern browsers with 3D support, e.g. Webkit, IE10            return 'translate3d';        } else if (vendorPrefix + 'Transform' in bodyStyle) {            // Browsers without 3D support, e.g. IE9            return 'translate';        } else {            // Browsers without translate() support, e.g. IE7-8            return 'margin';        }    };    /**     * Helpers     */    function clamp(n, min, max) {        if (n < min) return min;        if (n > max) return max;        return n;    }    /**     * (Internal) converts a percentage (`0..1`) to a bar translateX     * percentage (`-100%..0%`).     */    function toBarPerc(n) {        return (-1 + n) * 100;    }    /**     * (Internal) returns the correct CSS for changing the bar's     * position given an n percentage, and speed and ease from Settings     */    function barPositionCSS(n, speed, ease) {        var barCSS;        if (Settings.positionUsing === 'translate3d') {            barCSS = {                transform: 'translate3d(' + toBarPerc(n) + '%,0,0)'            };        } else if (Settings.positionUsing === 'translate') {            barCSS = {                transform: 'translate(' + toBarPerc(n) + '%,0)'            };        } else {            barCSS = {                'margin-left': toBarPerc(n) + '%'            };        }        barCSS.transition = 'all ' + speed + 'ms ' + ease;        return barCSS;    }    return NProgress;});

الخطوة الثانية كود CSS

الكود:
/* Make clicks pass-through */#nprogress {  pointer-events: none;}#nprogress .bar {  background: #c0392b;  position: fixed;  z-index: 100;  top: 0;  left: 0;  width: 100%;  height: 2px;}/* Fancy blur effect */#nprogress .peg {  display: block;  position: absolute;  right: 0px;  width: 100px;  height: 100%;  box-shadow: 0 0 10px #c0392b, 0 0 5px #c0392b;  opacity: 1.0;  -webkit-transform: rotate(3deg) translate(0px, -4px);      -ms-transform: rotate(3deg) translate(0px, -4px);          transform: rotate(3deg) translate(0px, -4px);}/* Remove these to get rid of the spinner */#nprogress .spinner {  display: block;  position: fixed;  z-index: 100;  top: 15px;  right: 15px;}#nprogress .spinner-icon {  width: 18px;  height: 18px;  box-sizing: border-box;  border: solid 2px transparent;  border-top-color: #c0392b;  border-left-color: #c0392b;  border-radius: 50%;  -webkit-animation: nprogress-spinner 400ms linear infinite;          animation: nprogress-spinner 400ms linear infinite;}£panda_selector_1414010073956_13_m_panda£{  0%   { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); }}£panda_selector_1414010073956_19_m_panda£{  0%   { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

الخطوة الثالثة كود هتمل يوضع بالقوالب
overall_header
قبل كلمة

او بالاعلانات الخاصة او عنصر مستقل


الكود:
<script type="text/javascript">NProgress.start();NProgress.done();</script>


واخيرا الكود منقول من مصدر اجنبى





تقيم هذا العضوالتبليغ عن هذة المشاركة


توقيع » Admin


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


avatar
مؤسس الموقع فاير واحد
Beginner MemBer
Beginner MemBer
αнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقف
أوسمة العضو
لم يمُنح اوسمة بعد
αнмєɒ мσнαмєɒ غير متواجد حالياً
   
نورتنا في نورتنا في : 19/12/2014
الدوله الدوله : مصر
الابراج الابراج : السمك
المشاركات المشاركات : 19
التقييم التقييم : 0
العمر العمر : 18
النوع النوع : ذكر

موضوع: _رد _11


شكرا لكم جدا منتديات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


تقيم هذا العضوالتبليغ عن هذة المشاركة


توقيع » فاير واحد


نشر الموضوع بتويتر
نشر الموضوع بالفيس بوك
نشر الموضوع بجوجل بلس

avatar
مؤسس الموقع Adel Rehan
# إدآري شـئون اﻷعـضآء
# إدآري شـئون اﻷعـضآء
αнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقف
أوسمة العضو
لم يمُنح اوسمة بعد
αнмєɒ мσнαмєɒ غير متواجد حالياً
   
نورتنا في نورتنا في : 01/03/2014
الدوله الدوله : مصر
الابراج الابراج : العقرب
المشاركات المشاركات : 280
التقييم التقييم : 20002
العمر العمر : 18
النوع النوع : ذكر

موضوع: _رد _17


شكرا لكم جدا منتديات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


تقيم هذا العضوالتبليغ عن هذة المشاركة


توقيع » Adel Rehan


نشر الموضوع بتويتر
نشر الموضوع بالفيس بوك
نشر الموضوع بجوجل بلس

avatar
مؤسس الموقع ملك الحصريات
Beginner MemBer
Beginner MemBer
αнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقفαнмєɒ мσнαмєɒ عضو مثقف
أوسمة العضو
لم يمُنح اوسمة بعد
αнмєɒ мσнαмєɒ غير متواجد حالياً
   
نورتنا في نورتنا في : 07/06/2015
الدوله الدوله : مصر
الابراج الابراج : العقرب
المشاركات المشاركات : 22
التقييم التقييم : 0
العمر العمر : 36
النوع النوع : ذكر

موضوع: رد: شريط تحميل بالاعلى مثل اليوتيوب


موضوع رائع وجهود اروع

جعله الله لك في ميزان الحسنات 



تقيم هذا العضوالتبليغ عن هذة المشاركة


توقيع » ملك الحصريات


نشر الموضوع بتويتر
نشر الموضوع بالفيس بوك
نشر الموضوع بجوجل بلس


الرد السريع

هل تريد التعليق؟
انضم إلى منتديات احلي مصري للحصول على حساب مجاني أو قم بتسجيل الدخول إذا كنت عضوًا بالفعل



«الموضوع السابق|الموضوع التالي»


تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

انتقل الى:



© phpBB | احصائيات | إتصل بنا | التبليغ عن محتوى مخالف
© phpBB | انشاء منتدى مجاني | منتدى مجاني للدعم و المساعدة | إتصل بنا | التبليغ عن محتوى مخالف | الحصول على مدونة مجانية