Jinsi ya Kutengeneza Animated Loading Spinners
Jifunze jinsi ya kuunda animated loading spinners kwa CSS na JS ili kuongeza feedback kwa watumiaji wakati content ya website yako ina load. Loading spinners hufanya website yako ionekane professional na interactive, badala ya kuacha blank screen.
Mfano wa Code (CSS Spinner):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Loading Spinner</title>
<style>
/* Spinner Container */
.spinner {
border: 8px solid #f3f3f3; /* background color */
border-top: 8px solid #3498db; /* spinner color */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 1s linear infinite;
margin: 100px auto;
}
/* Keyframe Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2 style="text-align:center;">CSS Animated Loading Spinner</h2>
<div class="spinner"></div>
</body>
</html>
Maelezo ya Code:
.spinner ni circle yenye border, na border-top ni rangi ya kuzunguka.
@keyframes spin inazungusha spinner 360° mara kwa mara (infinite).
Unaweza kubadilisha ukubwa, rangi, au speed (1s) ili kuendana na design ya website.
Mfano wa JS Spinner (Optional):
<div id="loader" class="spinner"></div>
<script>
window.addEventListener('load', () => {
document.getElementById('loader').style.display = 'none';
});
</script>
Spinner itaonekana wakati page inaloading na kuondoka baada ya content kuonekana.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
Mfano wa Code (CSS Spinner):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Loading Spinner</title>
<style>
/* Spinner Container */
.spinner {
border: 8px solid #f3f3f3; /* background color */
border-top: 8px solid #3498db; /* spinner color */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 1s linear infinite;
margin: 100px auto;
}
/* Keyframe Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h2 style="text-align:center;">CSS Animated Loading Spinner</h2>
<div class="spinner"></div>
</body>
</html>
Maelezo ya Code:
.spinner ni circle yenye border, na border-top ni rangi ya kuzunguka.
@keyframes spin inazungusha spinner 360° mara kwa mara (infinite).
Unaweza kubadilisha ukubwa, rangi, au speed (1s) ili kuendana na design ya website.
Mfano wa JS Spinner (Optional):
<div id="loader" class="spinner"></div>
<script>
window.addEventListener('load', () => {
document.getElementById('loader').style.display = 'none';
});
</script>
Spinner itaonekana wakati page inaloading na kuondoka baada ya content kuonekana.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509