السلام عليكم احبابي ومتتبعي مدونة نمهة التقنية الاوفياء في موضوع جديد وحصري على قسم اضافات بلوجر.
اضافتنا لهذا اليوم حول تأثير تحميل جديد للمدونة بعدما كنا قد نشرنا تأثير تحميل v1 من قبل اليوم سنشرح  لكم طريقة تركيب واحدة افضل منها واحترافية اكثر تابعو معي الشرح ↙↙

معاينة

👇 شرح طريقة تركيب التأثير 👇

]]></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;
}