اهلا بكم متابعين مدونة يهمك في شرح جديد في قسم اضافات بلوجر
اليوم اقدم لكم اضافة جديده وهيا تأثير تحميل بكشل جديد علي شكل شحنه كهربائية
والان مبروك عليك تم تركيب الاضافة بنجاح وان واجهتك اي مشكلة لا تتردد ب وضع مشكلتك في الكومنت وسارد عليك ب حلها ان شاء الله
اليوم اقدم لكم اضافة جديده وهيا تأثير تحميل بكشل جديد علي شكل شحنه كهربائية
المعاينه - اضغط هناا
والان بعد المعاينه نتجة الي شرح تركيب الاضافةاولاا ابحث عن وسم <head/> او </head>
ثم ضع فوقة كود الاستايل التاليبعد تركيب الاستايل تبحث علي وسم بداية البودي وتضع فوقة الكود التالي
<style>
div#loading-yhmaklod{right:0;bottom:0;position:fixed;z-index:99999999999999999999;display:block;left:0;top:0;background:#fff;width:100%;height:100%}
.indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(2)}
.indicator svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.indicator svg polyline#back{stroke:rgba(59,211,171,0.3)}
.indicator svg polyline#front{stroke:#3bd3ab;stroke-dasharray:12,36;stroke-dashoffset:48;animation:dash 1s linear infinite}
.cta{position:fixed;bottom:20px;right:30px;color:#222;font-weight:bold}
@-moz-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@-webkit-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@-o-keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
@keyframes dash{62.5%{opacity:0}to{stroke-dashoffset:0}}
</style>
ابحث عن <body> او <body
ثم ضع تحته مباشرة الكود التالي
<div id='loading-yhmaklod'>
<div class="indicator">
<svg width="16px" height="12px">
<polyline id="back" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
<polyline id="front" points="1 6 4 6 6 11 10 1 12 6 15 6"></polyline>
</svg>
</div>
</div>
<script type='text/javascript'>
$(window).load(function(){
$("#loading-yhmaklod").fadeOut(1000)
});
</script>
والان مبروك عليك تم تركيب الاضافة بنجاح وان واجهتك اي مشكلة لا تتردد ب وضع مشكلتك في الكومنت وسارد عليك ب حلها ان شاء الله
ليست هناك تعليقات:
إرسال تعليق