Smarty Material Design

power of google material

MATERIAL COMPONENTS

MATERIAL : LOADING

TThe Material Design Lite (MDL) progress component is a visual indicator of background activity in a web page or application. A progress indicator consists of a (typically) horizontal bar containing some animation that conveys a sense of motion. While some progress devices indicate an approximate or specific percentage of completion, the MDL progress component simply communicates the fact that an activity is ongoing and is not yet complete.

HOW TO ENABLE MATERIAL

1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official

Default

Show Code

<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>

<!-- Javascript Code -->
<script>
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });
</script>

Indeterminate

Show Code

<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

Buffering

Show Code

<!-- MDL Progress Bar with Buffering -->
<div id="p3" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(33);
    this.MaterialProgress.setBuffer(87);
  });
</script>

Default

Single color

Show Code

<!-- MDL Spinner Component -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>

<!-- MDL Spinner Component with Single Color -->
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

BLOCKS

MDL class	Effect	Remarks
`mdl-spinner`	Defines the container as an MDL spinner component	Required
`mdl-js-spinner`	Assigns basic MDL behavior to spinner	Required
`is-active`	Makes the spinner visible and animated	Optional
`mdl-spinner--single-color`	Uses a single (primary palette) color instead of changing colors	Optional

WHY SMARTY?

RECENTLY VISITED

CONTACT INFO

Smarty Material Design

MATERIAL COMPONENTS

MATERIAL : LOADING

BLOCKS