HomeAll Postঅসাধারন Responsive Page Loader আইকন তৈরি করুন HTML CSS ব্যবহার করে ||
Advertice Space with sell

Contact With facebook

অসাধারন Responsive Page Loader আইকন তৈরি করুন HTML CSS ব্যবহার করে ||

আসসালামু আলাইকুম

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সবাই ভালো আছেন।। আমিও আল্লাহ তায়ালার রহমতে ভালো আছি এবং সুস্থ আছি আলহামদুলিল্লাহ।

আজকে আমি আপনাদের দেখাবো কিভাবে একটি পেইজ লোডার আইকন তৈরি করবেন শুধুমাত্র 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 {
margin: 0;
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);}
}

সম্পুর্ন পোস্ট টি পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।

The post অসাধারন Responsive Page Loader আইকন তৈরি করুন HTML CSS ব্যবহার করে || appeared first on Trickbd.com.

Source:

About Author (1877)

This author may not interusted to share anything with others

Leave a Reply

Related Posts

Switch To Desktop Version