আসসালামু আলাইকুম
আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সবাই ভালো আছেন।। আমিও আল্লাহ তায়ালার রহমতে ভালো আছি এবং সুস্থ আছি আলহামদুলিল্লাহ।
আজকে আমি আপনাদের দেখাবো কিভাবে একটি পেইজ লোডার আইকন তৈরি করবেন শুধুমাত্র HTML আর CSS ব্যবহার করে।
এই ট্রিক্সটি ব্যবহার করে খুব সহজেই আপনি আপনার ওয়েবসাইটের জন্য রেস্পন্সিভ পেজ লোড আইকন তৈরি করতে পারবেন।
আইকন কি দেখতে কি রকম হবে তার ডেমো।
লিংক:
Click Here
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Loader</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”pre-loader”>
<div class=”loader”>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
}
*{
box-sizing: border-box;
}
.pre-loader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
.pre-loader .loader {
height: 80px;
width: 80px;
border: 8px solid #ffffff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50%;
position: relative;
animation: spin 3s linear infinite;
}
.pre-loader .loader:after{
content: ”;
position: absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
background-color: #ffffff;
border-radius: 50%;
}
@keyframes spin {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
সম্পুর্ন পোস্ট টি পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।
2 thoughts on "অসাধারন Responsive Page Loader আইকন তৈরি করুন HTML CSS ব্যবহার করে ||"