مدونة هلا تك

احدث إضافات التحميل اقدمها لكم

ما يميز شكل المدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف ..
إضافة تأثير تحميل المدونة لمدونات بلوجر , إضافة مميزة , خفيفة و لا تأثر في سرعة مدونتك كما أنها متوافقة مع جميع المتصفحات و الأجهزة.
إضافة إلى أنها تجعل الزائر مهتما أكثر من ذي قبل لقراءة التدوينة أو مشاهدة الموقع .. فلو كانت تحميل مدونتك بطيئا , فالزئر سيملّ
من الإنتظار أما صفحة بيضاء ..

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

طريقة التركيب توجه الى القالب ثم تحرير html
ضع كود الشكل المختار فوق <body>

الشكل الاول

<style>
#cookingbody {
width: 100%;
height: 100%;
background: #ffde6b;
position: fixed;
left: 0;
top: 0;
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#cooking {
position: relative;
width: 50vh;
height: 50vh;
margin: 0 auto;
}

#cookingbody h1 {
font-family: sans-serif;
font-size: 3vh;
color: #333;
opacity: .75;
animation: pulse 1s linear infinite;
margin-bottom: 20px;
}

.bubble {
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0.25vh #4d4d4d;
opacity: 0;
}

.bubble:nth-child(1) {
left: 58%;
width: 2.5vh;
height: 2.5vh;
background-color: #454545;
animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
}

.bubble:nth-child(2) {
left: 52%;
width: 2vh;
height: 2vh;
background-color: #3d3d3d;
animation: bubble 2s ease-in-out 0.35s infinite;
}

.bubble:nth-child(3) {
left: 50%;
width: 1.5vh;
height: 1.5vh;
background-color: #333;
animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
}

.bubble:nth-child(4) {
left: 56%;
width: 1.2vh;
height: 1.2vh;
background-color: #2b2b2b;
animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.9s infinite;
}

.bubble:nth-child(5) {
left: 63%;
width: 1.1vh;
height: 1.1vh;
background-color: #242424;
animation: bubble 1.6s ease-in-out 1s infinite;
}

#area {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background-color: transparent;
transform-origin: 15% 60%;
animation: flip 2.1s ease-in-out infinite;
}

#sides {
position: absolute;
width: 100%;
height: 100%;
transform-origin: 15% 60%;
animation: switchSide 2.1s ease-in-out infinite;
}

#handle {
position: absolute;
bottom: 18%;
right: 80%;
width: 35%;
height: 20%;
background-color: transparent;
border-top: 1vh solid #333;
border-left: 1vh solid transparent;
border-radius: 100%;
transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
}

#pan {
position: absolute;
bottom: 20%;
right: 30%;
width: 50%;
height: 8%;
background-color: #333;
border-radius: 0 0 1.4em 1.4em;
transform-origin: -15% 0;
}

#pancake {
position: absolute;
top: 24%;
width: 100%;
height: 100%;
transform: rotateX(85deg);
animation: jump 2.1s ease-in-out infinite;
}

#pastry {
position: absolute;
bottom: 26%;
right: 37%;
width: 40%;
height: 45%;
background-color: #333;
box-shadow: 0 0 3px 0 #333;
border-radius: 100%;
transform-origin: -20% 0;
animation: fly 2.1s ease-in-out infinite;
}

@keyframes jump {
0% { top: 24%; transform: rotateX(85deg); }
25% { top: 10%; transform: rotateX(0deg); }
50% { top: 30%; transform: rotateX(85deg); }
75% { transform: rotateX(0deg); }
100% { transform: rotateX(85deg); }
}

@keyframes flip {
0% { transform: rotate(0deg); }
5% { transform: rotate(-27deg); }
30%, 50% { transform: rotate(0deg); }
55% { transform: rotate(27deg); }
83.3% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}

@keyframes switchSide {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(0deg); }
}

@keyframes fly {
0% { bottom: 26%; transform: rotate(0deg); }
10% { bottom: 40%; }
50% { bottom: 26%; transform: rotate(-190deg); }
80% { bottom: 40%; }
100% { bottom: 26%; transform: rotate(0deg); }
}

@keyframes bubble {
0% { transform: scale(0.15); top: 80%; opacity: 0; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(0.33); top: 60%; opacity: 0; }
}

@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 1; }
}

@keyframes fadeOut {
to { opacity: 0; visibility: hidden; }
}
</style>

<div id='cookingbody'>
<h1>Cooking in progress..</h1>
<div id='cooking'>
<div class='bubble'/>
<div class='bubble'/>
<div class='bubble'/>
<div class='bubble'/>
<div class='bubble'/>
<div id='area'>
<div id='sides'>
<div id='pan'/>
<div id='handle'/>
</div>
<div id='pancake'>
<div id='pastry'/>
</div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.getElementById('cookingbody').style.animation = 'fadeOut 0.5s forwards';
setTimeout(function() {
document.getElementById('cookingbody').remove();
}, 500);
}, 2000); // يختفي بعد 2 ثانية
});
</script>

الشكل الثاني

<style>
.loaderbody {
width: 100%;
height: 100%;
background: #F2F1EF;
position: fixed;
left: 0;
top: 0;
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
}

.loader {
position: relative;
width: 50px;
height: 10px;
background: #3498db;
border-radius: 5px;
animation: load 1.8s ease-in-out infinite;
transform: none; /* تم تعديل هذه القيمة */
}

.loader:before,
.loader:after {
position: absolute;
content: "";
height: 10px;
border-radius: 5px;
animation: load 1.8s ease-in-out infinite;
}

.loader:before {
top: -20px;
left: 10px;
width: 40px;
background: #ef4836;
}

.loader:after {
bottom: -20px;
width: 35px;
background: #f5ab35;
}

@keyframes load {
0% { transform: translateX(40px); }
50% { transform: translateX(-30px); }
100% { transform: translateX(40px); }
}

.fade-out {
animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
to { opacity: 0; visibility: hidden; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
// عرض المؤشر لمدة 3 ثوانٍ ثم يختفي
setTimeout(function() {
document.querySelector('.loaderbody').classList.add('fade-out');

// إزالة العناصر بعد انتهاء الانتقال
setTimeout(function() {
document.querySelector('.loaderbody').remove();
}, 500);
}, 3000);
});
</script>

<div class='loaderbody'>
<div class='loader'/>
</div>

الشكل الثالث

<style>

.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #4492f4;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}

.loading-content {
position: relative;
width: 112px;
height: 70px;
}

.finger {
position: absolute;
width: 20px;
height: 100%;
background: #fff;
border-radius: 6px 6px 8px 8px;
}

.finger-1 {
left: 0;
animation: finger1 2s infinite ease-out;
}

.finger-2 {
left: 22px;
animation: finger2 2s infinite ease-out;
}

.finger-3 {
left: 44px;
animation: finger3 2s infinite ease-out;
}

.finger-4 {
left: 66px;
animation: finger4 2s infinite ease-out;
}

.finger-item {
position: relative;
width: 100%;
height: 100%;
}

.finger-lines {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
}

.finger-line {
height: 2px;
background: #4492f4;
margin-bottom: 2px;
}

.finger-tip {
position: absolute;
left: 3px;
bottom: 3px;
width: 14px;
height: 14px;
background: #4492f4;
border-radius: 10px 10px 7px 7px;
}

.last-finger {
position: absolute;
left: 88px;
top: 0;
width: 24px;
height: 100%;
overflow: hidden;
}

.last-finger-item {
position: absolute;
right: 0;
top: 32px;
width: 110%;
height: 20px;
background: #fff;
border-radius: 0 5px 14px 0;
animation: finger5 2s infinite linear;
}

.last-finger-item::before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 22px;
height: 8px;
background: #fff;
}

.last-finger-item::after {
content: '';
position: absolute;
left: 0;
bottom: -20px;
width: 34px;
height: 20px;
background: #4492f4;
border-radius: 0 0 15px 15px;
}

@keyframes finger1 {
0%, 20% { transform: translateY(0); }
29%, 35% { transform: translateY(15px); }
41%, 100% { transform: translateY(0); }
}

@keyframes finger2 {
0%, 24% { transform: translateY(0); }
33%, 39% { transform: translateY(15px); }
45%, 100% { transform: translateY(0); }
}

@keyframes finger3 {
0%, 28% { transform: translateY(0); }
37%, 43% { transform: translateY(15px); }
49%, 100% { transform: translateY(0); }
}

@keyframes finger4 {
0%, 32% { transform: translateY(0); }
41%, 47% { transform: translateY(15px); }
53%, 100% { transform: translateY(0); }
}

@keyframes finger5 {
0%, 34% { transform: rotate(0deg); }
43%, 50% { transform: rotate(-12deg); }
60%, 100% { transform: rotate(0deg); }
}

.hide-loader {
opacity: 0;
pointer-events: none;
}
</style>

<div class='loading-container' id='loader'>
<div class='loading-content'>
<div class='finger finger-1'>
<div class='finger-item'>
<div class='finger-lines'>
<div class='finger-line'/>
<div class='finger-line'/>
</div>
<div class='finger-tip'/>
</div>
</div>
<div class='finger finger-2'>
<div class='finger-item'>
<div class='finger-lines'>
<div class='finger-line'/>
<div class='finger-line'/>
</div>
<div class='finger-tip'/>
</div>
</div>
<div class='finger finger-3'>
<div class='finger-item'>
<div class='finger-lines'>
<div class='finger-line'/>
<div class='finger-line'/>
</div>
<div class='finger-tip'/>
</div>
</div>
<div class='finger finger-4'>
<div class='finger-item'>
<div class='finger-lines'>
<div class='finger-line'/>
<div class='finger-line'/>
</div>
<div class='finger-tip'/>
</div>
</div>
<div class='last-finger'>
<div class='last-finger-item'/>
</div>
</div>
</div>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>
<script>
// اختفاء شاشة التحميل بعد تحميل الصفحة
$(window).on('load', function() {
setTimeout(function() {
$('#loader').addClass('hide-loader');
setTimeout(function() {
$('#loader').remove();
}, 500);
}, 4000); // يمكن تعديل هذا الوقت حسب الحاجة
});

// بديل إذا لم يتم تحميل كل الصفحة خلال وقت معقول
$(document).ready(function() {
setTimeout(function() {
$('#loader').addClass('hide-loader');
setTimeout(function() {
$('#loader').remove();
}, 500);
}, 4000); // أقصى وقت انتظار 3 ثواني
});
</script>

الشكل الرابع

<style>

/* Global Loader Styles */
.global-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #282828;
z-index: 100000;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-content {
width: 70px;
height: 60px;
position: relative;
margin-top: 15%;
}

.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}

.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}

/* Top Section */
#top {
width: 53px;
height: 20px;
left: 20px;
transform: skew(-15deg, 0);
z-index: 100;
}

#top .plane {
z-index: 2000;
animation: trans1 1.3s ease-in infinite 0s backwards;
}

/* Middle Section */
#middle {
width: 33px;
height: 20px;
left: 20px;
top: 15px;
transform: skew(-15deg, 40deg);
}

#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 1.3s linear infinite 0.3s backwards;
}

/* Bottom Section */
#bottom {
width: 53px;
height: 20px;
top: 30px;
transform: skew(-15deg, 0);
}

#bottom .plane {
z-index: 2000;
animation: trans3 1.3s ease-out infinite 0.7s backwards;
}

/* Loading Text */
.loading-text {
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 70px;
font-family: sans-serif;
text-align: center;
font-size: 10px;
width: 100%;
}

/* Animations */
@keyframes trans1 {
from { transform: translate3d(53px, 0, 0); }
to { transform: translate3d(-250px, 0, 0); }
}

@keyframes trans2 {
from { transform: translate3d(-160px, 0, 0); }
to { transform: translate3d(53px, 0, 0); }
}

@keyframes trans3 {
from { transform: translate3d(53px, 0, 0); }
to { transform: translate3d(-220px, 0, 0); }
}

@keyframes animColor {
from { background: red; }
25% { background: yellow; }
50% { background: green; }
75% { background: brown; }
to { background: blue; }
}

/* Hide Loader */
.loader-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
</style>


<div class='global-loader' id='globalLoader'>
<div class='loader-content'>
<div class='mask' id='top'>
<div class='plane'/>
</div>
<div class='mask' id='middle'>
<div class='plane'/>
</div>
<div class='mask' id='bottom'>
<div class='plane'/>
</div>
<p class='loading-text'><i>LOADING...</i></p>
</div>
</div>

<div class='main-content'>

</div>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>
<script>
// اختفاء شاشة التحميل بعد تحميل الصفحة
$(window).on('load', function() {
hideLoader();
});

// بديل إذا لم يتم تحميل كل الصفحة خلال وقت معقول
$(document).ready(function() {
setTimeout(hideLoader, 3000); // أقصى وقت انتظار 3 ثواني
});

function hideLoader() {
$('#globalLoader').addClass('loader-hidden');
setTimeout(function() {
$('#globalLoader').remove();
}, 500);
}
</script>

و شكرا

تعليقان (2)

™AMMAR♕ 11/4/25

ي اخي انا لما ركبت هذا السكيربت تطول في المدة
1. HalaTeck 12/4/25
  
  hاهلا بك اخي الكريم تم تعديل الوقت لجميع الاضافات =(

✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .