اضافة تأثير تحميل احترافي V2
السلام عليكم احبابي ومتتبعي مدونة نمهة التقنية الاوفياء في موضوع جديد وحصري على قسم اضافات بلوجر.
اضافتنا لهذا اليوم حول تأثير تحميل جديد للمدونة بعدما كنا قد نشرنا تأثير تحميل v1 من قبل اليوم سنشرح  لكم طريقة تركيب واحدة افضل منها واحترافية اكثر تابعو معي الشرح ↙↙
معاينة
👇 شرح طريقة تركيب التأثير 👇
أولا لاضافة اكواد css عليك البحث عن الوسم :
]]></b:skin>
ثم ضع فوقه الاكواد التالية:

/*------------------------------------------------------------------
Loading v2 by www.Nak1ha.com
-------------------------------------------------------------------*/
.mfp-preloader {
margin-top: -100px; }
.mfp-preloader .preloader {
margin: 0 auto; }
.preloader-wrapp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fa411e;
    background-image: linear-gradient(45deg,rgba(233, 30, 99, 0.75), rgba(250, 65, 30, 0.75));
    background-image: -moz-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));
    background-image: -webkit-linear-gradient(10deg,rgba(233, 30, 99, 0.75), rgba(243, 93, 40, 0.75));
    background-image: -ms-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));z-index: 100000000; }
.preloader-wrapp .preloader {
position: absolute;
top: 45%;
left: 50%;
margin-top: -100px;
margin-left: -100px; }
.preloader-wrapp &gt; img {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 145px;
    margin-left: -70px;
    margin-top: -30px;
    z-index: 22;
}
.preloader {
position: relative;
box-sizing: border-box;
background-clip: padding-box;
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid rgba(255, 255, 255, 0.1);
-webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
-webkit-transform-origin: 50% 60%;
-ms-transform-origin: 50% 60%;
-o-transform-origin: 50% 60%;
transform-origin: 50% 60%;
-webkit-transform: perspective(200px) rotateX(80deg);
transform: perspective(200px) rotateX(80deg); }
.preloader:before, .preloader:after {
content: &quot;&quot;;
position: absolute;
left: 0;
top: 0;
margin: -5px;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
border: 5px solid rgba(255, 255, 255, 0.1);
opacity: .85;
border-color: #f55473;
border-top-color: #fff;
-webkit-animation: preloader-spin 1s infinite;
-o-animation: preloader-spin 1s infinite;
animation: preloader-spin 1s infinite; }
.preloader:after {
-webkit-animation-delay: 0.35s;
-o-animation-delay: 0.35s;
animation-delay: 0.35s; }
@-webkit-keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-o-keyframes preloader-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
.fa-refresh {
position: absolute;
top: 45%;
left: 50%;
margin-top: 70px;
margin-left: -5px;
font-size: 18px;
color: #fff;
}

ثانيا ابحث عن الوسم
<body
وضع أسفله هذه الاكواد
<div class='page-preloader preloader-wrapp'>
<img alt='' src='http://d.top4top.net/p_3735b3sn1.png'/>
<div class='preloader'/>
<a href='#refresh' onclick='location.reload(true)'><i class='fa fa-refresh fa-spin'/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function() {
        // will first fade out the loading animation
$(".preloader-wrapp").delay(1000).fadeOut('slow');
})
//]]>
</script>
ثم غير الرابط الملون بالأحمر برابط شعار مدونتك
ومبروك عليك
إلى هنا نكون وصلنا الى اخر موضوعنا لهذا اليوم أتمنى ان ينال موضوعنا اعجابكم 😘
اضافة تأثير تحميل احترافي V2

اضافة تأثير تحميل احترافي V2

هناك 8 تعليقات:

  1. تابع طــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــوپ

    ردحذف

جميع الحقوق محفوظة نكهة التقنية | تصميم : الروسافي عمر