MaterialLoaders icon indicating copy to clipboard operation
MaterialLoaders copied to clipboard

Published 20 hours ago • verified publisher icon theIYD
→

Metadata

🌐 A small packet library full of material colored loaders.

Image

GitHub forks GitHub issues GitHub stars GitHub license Twitter

Material Loaders

Material Loaders is a small library which contains loaders and spinners which act as small elements of a professional website having a fill of material colors.

How to implement a loader ?

I have found a great resource. Go here. Follow the instructions over there

Usage

  • Include the MLoaders.css or the minified version in <head> tag.
  <head> 
    <link rel="stylesheet" href="Mloaders.min.css">
  </head>
  • Secondly, include the main class 'mloader' and any one class from the following mentioned classes :-
Bouncy
  <div class="mloader bouncy bouncy-balls">
    <span></span>
    <span></span>
    <span></span>
  </div>
Circle
<div class="mloader circle c-red-500"></div>
  • Classes of circle are :- c-red-500 c-pink-500 c-purple-500 c-deep-purple-500 c-indigo-500 c-blue-500 c-light-blue-500 c-cyan-500 c-teal-500 c-green-500 c-light-green-500 c-lime-500 c-yellow-500 c-amber-500 c-orange-500 c-deep-orange-500 c-brown-500 c-blue-grey-500 c-black-500
Colorful Square
<div class="mloader s-colorful"></div>
Spin Circle
<div class="mloader spin-circle">
  <span></span>
  <span></span>
</div>
Ring
<div class="mloader ring r-red-500"></div>
  • Classes of circle are :- r-red-500 r-pink-500 r-purple-500 r-deep-purple-500 r-indigo-500 r-blue-500 r-light-blue-500 r-cyan-500 r-teal-500 r-green-500 r-light-green-500 r-lime-500 r-yellow-500 r-amber-500 r-orange-500 r-deep-orange-500 r-brown-500 r-blue-grey-500 r-black-500
Square
<div class="mloader square s-red-500">
  <div class="square-inside"></div>
</div>
  • Classes of circle are :- s-red-500 s-pink-500 s-purple-500 s-deep-purple-500 s-indigo-500 s-blue-500 s-light-blue-500 s-cyan-500 s-teal-500 s-green-500 s-light-green-500 s-lime-500 s-yellow-500 s-amber-500 s-orange-500 s-deep-orange-500 s-brown-500 s-blue-grey-500 s-black-500
Timer
<div class="mloader timer"></div>
Dotted Circle
  <div class="mloader circle-dot"></div>
Ring Evolution
  <div class="mloader e-ring"></div>
Sticks
  <div class="sticks"></div>
Fill-Circle
  <div class="mloader fill-circle">
     <span></span>
  </div>
Flip-board
  <div class="mloader flip-board">
  </div>
Google Loader
  <div class="mloader google">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
Double-Circle
  <div class="mloader double-circle"></div>
Bar
  <div class="bar"></div>
Spin Wheel
  <div class="four-color"></div>
Lines
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
Flying Dots
  <div class="flying-dots">
       <span></span>
       <span></span>
       <span></span>
  </div>
Oscillation
  <div class="oscillate"></div>
Moving Squares
  <div class="moving-square"></div>

:bulb: Tip

It is recommended to wrap the loader or the spinner div with another div so that you could center the wrapper div horizontally and vertically.

  • Lastly, enjoy the loaders and spinners. As a token of appreciation, a star to this repository will help me to bring you more libraries in near future.

License

Copyright 2017 Idrees Dargahwala

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

← Metadata

8
Stars
1
Forks
Watchers

Owner

verified publisher icon theIYD

Metadata

🌐 A small packet library full of material colored loaders.

Back