وب آکادمی

مرجع آموزش طراحی و برنامه نویسی وب

جلسه دوازدهم- ساخت نمودار پیشرفت ( بارگذاری) در متریالایز

دسته بندی:آموزش چارچوب متریالایز تاریخ انتشار: 4 بهمن 1397 برچسب ها : برچسب‌ها:, , , , ,

در متریالایز(materialize) کلاس های متنوعی برای ساخت نوار لودر یا همان progress bars وجود دارد. در جدول زیر به این کلاس های اشاره شده  است.
نام کلاس  توضیحات
progress برای ساخت یک div به عنوان نوار لودر (progress bars) مورد نیاز است.
determinate مشخصات اولیه برای ساخت نوار منوی قابل پیشرفت را ایجاد می کند.
indeterminate انیمیشن را برای یک نوار لودر ایجاد می کند.

 

مثال

مثال زیر به ساخت انواع نوار منو های مختلف را نشان می دهد.

<html>
   <head>
      <title>The Materialize Preloader Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">      
	  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container"> 
      <h4>Default Preloader</h4>
      <div class="progress">
         <div class="determinate" style="width: 50%"></div>
      </div>
      <h4>Indeterminate Preloader</h4>
      <div class="progress">
         <div class="indeterminate"></div>
      </div>
      <h4>Circular Preloader</h4>
      <div class="preloader-wrapper big active">
         <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
               <div class="circle"></div>
            </div>
            <div class="gap-patch">
               <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
               <div class="circle"></div>
            </div>
         </div>
      </div>
   </body>  
</html>

خروجی بصورت زیر است:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 + پانزده =