কম্পিউটার

কিভাবে CSS দিয়ে একটি প্রিলোডার তৈরি করবেন?


সিএসএস দিয়ে একটি প্রিলোডার তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .loader {
      border: 16px double #ffee00;
      border-radius: 50%;
      border-top: 16px solid #7434db;
      width: 140px;
      height: 140px;
      -webkit-animation: loader 2s linear infinite; /* Safari */
      animation: loader 2s linear infinite;
   }
   @-webkit-keyframes loader {
      0% {
         -webkit-transform: rotate(0deg);
      }
      100% {
         -webkit-transform: rotate(360deg);
      }
   }
   @keyframes loader {
      0% {
         transform: rotate(0deg);
      }
      100% {
         transform: rotate(360deg);
      }
   }
</style>
</head>
<body>
<h1>Creating a pre Loader example</h1>
<div class="loader"></div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি প্রিলোডার তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি পণ্য কার্ড তৈরি করবেন?

  2. কিভাবে CSS দিয়ে কার্ড তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  4. কিভাবে CSS দিয়ে তীর তৈরি করবেন?