কিভাবে তৈরি করা হয়: CSS লোডার

সিএসএস দ্বারা প্রিলোডার কিভাবে তৈরি করা হয়েছে তা শিখুন。

亲自试一试

লোডার কিভাবে তৈরি করা হয়

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="loader"></div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

.loader {
  border: 16px solid #f3f3f3; /* আকরা সাদা */
  border-top: 16px solid #3498db; /* নীল */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

উদাহরণ:

border এসপ্যাস লোডারের বর্তনীর মাপ এবং রঙ নির্দিষ্ট করেborder-radius এসপ্যাস লোডারকে বৃত্তাকার হিসাবে রূপান্তরিত করে

বর্তনীর ভিতরে রোটেশন করা নীল অংশকে যোগ করতে পারেন border-top এসপ্যাস নির্দিষ্ট করা হয়েছে।যদি আপনারা আরও বেশি 'রোটেশনার' যোগ করতে চান, তবে একটিborder-bottom、 border-left এবং/অথবাborder-right

লোডারের মাপ এই এসপ্যাসের দ্বারা নির্দিষ্ট হয়েছে (দৃশ্যতে নীচের উদাহরণ)。 width এবং height এসপ্যাস নির্দিষ্ট করা হয়েছে。

শেষপর্যন্ত আমরা একটি অ্যানিমেশন যোগ করেছি যাতে নীল অংশ 2 সেকেন্ডের অ্যানিমেশনের গতিতে সর্বকালীন রোটেশন করে。

নোট:এমন ব্রাউজারগুলোর জন্য animation এবং transform এসপ্যাস ব্রাউজারের জন্য আপনাকে একটি -webkit- প্রিফিক্স।এক্সাম্প্লারে কিভাবে কাজ করে দেখুন。

আরও বেশি রোটেশনার যোগ করুন

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

亲自试一试

另一个例子

如何将加载器放置在页面中间，并在加载完成时显示“页面内容”：

实例

亲自试一试