aurelia-materialize-bridge
Version:
Aurelia interface to http://materializecss.com/
74 lines (70 loc) • 1.97 kB
HTML
<template>
<template if.bind="type === 'linear'">
<div class="progress">
<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
</div>
</template>
<template if.bind="type === 'circular' && color !== 'flashing'">
<div class="preloader-wrapper ${size} active" ref="wrapper">
<div class="spinner-layer spinner-${color}-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>
</template>
<template if.bind="type === 'circular' && color === 'flashing'">
<div class="preloader-wrapper ${size} active" ref="wrapper">
<div class="spinner-layer spinner-blue">
<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 class="spinner-layer spinner-red">
<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 class="spinner-layer spinner-yellow">
<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 class="spinner-layer spinner-green">
<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>
</template>
</template>