آموزش ساخت لودر Preloaders صفحه وب سایت با Css3 و Html

ویژه آموزش ساخت لودر Preloaders صفحه وب سایت با Css3 و Html

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

حتما برای شما هم پیش آمده که بخواهید یک صفحه از وب سایت را باز کنید ولی بدلیل مشکلات گوناگون صفحه مورد نظر باز نشده و یک لودر به شما نمایش داده می شود که ساده ترین آن نیز همان لودر تب مرورگر می باشد . دایره ای که دائم در حال چرخش است .
من در ادامه می خواهم با استفاده از Html  و Css3 یک لودر همانند مرورگر برای شما ایجاد کنم .تصویر آموزش جهت نمونه می باشد و برای مشاهده دمو باید بر روی لینک مورد نظر کلیک کنید . ( دمو تمرین در مرورگر)

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ایکه بتوانید یکسری کد را درون آن تایپ کنید باز کرده و گدهای ابتدای Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
  <head>
  </head>
        <body>
        </body>
</html>

 

2. سپس یک دیویژن با عنوان <div class="preloader4"></div> درون تگ body ایجاد کنید تا استایل را با استفاده از این کلاس فراخوانی کنیم .

<div class="preloader4"></div>

 

3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .

 

<!DOCTYPE html>
<html>
<head>
<style>
.preloader4 {
   width:200px;
   height:200px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:2px solid;
   border-top-color:rgba(0,0,0, 0.65);
   border-bottom-color:rgba(0,0,0, 0.15);
   border-left-color:rgba(0,0,0, 0.65);
   border-right-color:rgba(0,0,0, 0.15);
   -webkit-animation: preloader4 0.8s linear infinite;
   animation: preloader4 0.8s linear infinite;
}
@keyframes preloader4 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader4 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="preloader4"></div>
<h2>Learning asarayan- preloader </h2>
</body>
</html>

دمو تمرین در مرورگر

آخرین بروز رسانیجمعه, 22 خرداد 1394 10:10

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #1 hadi 1398-05-26 11:58
برای اینکه عکس وسط لودر قرار بدیم ثابت باشه چیکار کنیم؟
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا