مركز الإعتمادات العربى
مرحبا بك في مركز الإعتمادات العربي

تشرفنا زيارتك لنا وندعوك الى التسجيل وانضمام لنا والتمتع بخدماتنا المتميزة

مركز الإعتمادات العربى

إعتمادات أحلى منتدى , خدمات الإعتمادات و المعاملات المالية
 
الرئيسيةالرئيسية  البوابةالبوابة  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Michael_vx
عضو نشيط
عضو نشيط


ذكر
عدد المساهمات : 477
التقييم : 1
العمر : 25
احترام قوانين المنتدى :

مُساهمةموضوع: شريط تحميل بالاعلى مثل اليوتيوب   الأربعاء 22 أكتوبر - 22:41

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

الرمز:
/*! 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
قبل كلمة
</head>
او بالاعلانات الخاصة او عنصر مستقل


الرمز:
<script type="text/javascript">NProgress.start();NProgress.done();</script>


واخيرا الكود منقول من مصدر اجنبى
:عغفتاا:


الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://micsoft.hol.es
JAR7
عضو سوبر
عضو سوبر



انثى
عدد المساهمات : 13599
التقييم : 39
احترام قوانين المنتدى :

مُساهمةموضوع: رد: شريط تحميل بالاعلى مثل اليوتيوب   السبت 25 أكتوبر - 15:17

بارك الله فيك ينقل

الرجوع الى أعلى الصفحة اذهب الى الأسفل
mahmadawad
عضو سوبر
عضو سوبر



ذكر
عدد المساهمات : 4528
التقييم : 3
العمر : 23
احترام قوانين المنتدى :

مُساهمةموضوع: رد: شريط تحميل بالاعلى مثل اليوتيوب   الثلاثاء 11 نوفمبر - 9:53

شكرا لك

الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.e3tmadat.com
عمر المصري
عضو نشيط
عضو نشيط



ذكر
عدد المساهمات : 402
التقييم : 0
العمر : 23
احترام قوانين المنتدى :

مُساهمةموضوع: رد: شريط تحميل بالاعلى مثل اليوتيوب   الإثنين 4 يناير - 13:31

بِآرَﻛَ آلَلَﮩ فْيْﻛَ

جَزَآﻛَ آلَلَﮩ آلَفْ خِيْرَ

طٌـــــــــبِــــــتْ

الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
شريط تحميل بالاعلى مثل اليوتيوب
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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