17 #Loader Loader

Html
   <div class="sf-loader -color">
 	 <div class="sf-loader__content">
 		  <div class="sf-loader__rect -first"></div>
 		  <div class="sf-loader__rect -second"></div>
 	      <div class="sf-loader__rect -third"></div>
 	    </div>
   </div>
Html
    <div class="sf-loader">
 	 <div class="sf-loader__content">
 		  <div class="sf-loader__rect -first"></div>
 		  <div class="sf-loader__rect -second"></div>
 	      <div class="sf-loader__rect -third"></div>
 	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-skeleton.-list-with-thumb

Html
    <div class="sf-loader -skeleton -list-with-thumb">
 	 <div class="sf-loader__content">
	    </div>
   </div>
Html
    <div class="sf-loader -big">
 	 <div class="sf-loader__content">
 		  <div class="sf-loader__rect -first"></div>
 		  <div class="sf-loader__rect -second"></div>
 	      <div class="sf-loader__rect -third"></div>
 	    </div>
   </div>
Html
    <div class="sf-loader -mini">
 	 <div class="sf-loader__content">
 		  <div class="sf-loader__rect -first"></div>
 		  <div class="sf-loader__rect -second"></div>
 	      <div class="sf-loader__rect -third"></div>
 	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-progressbar

Html
    <div class="sf-loader -progressbar">
 	 <div class="sf-loader__content">
	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-skeleton.-side-content.-darker

Html
    <div class="sf-loader -skeleton -side-content -darker">
 	 <div class="sf-loader__content">
	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Html
    <div class="sf-loader -skeleton -content">
 	 <div class="sf-loader__content">
	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-skeleton.-list-horizontal

Html
    <div class="sf-loader -skeleton -list-horizontal">
 	 <div class="sf-loader__content">
	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-skeleton.-list

Html
    <div class="sf-loader -skeleton -list">
 	 <div class="sf-loader__content">
	    </div>
   </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-loader.-skeleton.-title

Html
    <div class="sf-loader -skeleton -title">
 	 <div class="sf-loader__content">
	    </div>
   </div>