【javascript】jQueryを使用しないプリローダーMaterial Design Preloader

Material Design PreloaderはjQueryを使用しない、マテリアルデザインを基にしたプリローダー。

headに含める

<link href="css/materialPreloader.min.css" rel="stylesheet prefetch">
<script type="text/javascript" src="js/angular-Material-Preloader.min.js"></script>

angularMaterialPreloader追加

var myApp = angular.module("app", ["angularMaterialPreloader"])

div material-preloaderを含める

<div material-preloader position="top" height="5px" col1='#159756' col2='#da4733' col3='#3b78e7' col4='#fdba2c' ></div>
// material-preloader as attribute

もしくはmaterial-preloaderを含める

<material-preloader position="top" height="5px" col1='#159756' col2='#da4733' col3='#3b78e7' col4='#fdba2c' ></material-preloader>
// material-preloader as element

VARIABLE

$scope.materialPreloader = TRUE/FALSE;
// Use true or false to on/off the materialpreloader.

materialPreloader Options

attribute Default
position top
height 5px
col1 #159756
col2 #da4733
col3 #3b78e7
col4 #fdba2c

MITライセンス

 
Material Design Preloader

【javascript】jQueryを使用しないプリローダーMaterial Design Preloader

  • LATEST
  • RELATED
  • POPULAR