17 #Loader Loader
17.1 #Loader.color Loader Color
.sf-loader.-color
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>17.2 #Loader.default Default Loader
.sf-loader
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>17.3 #Loader.Horizontal-List-With-Thumbnail Loader Skeleton Horizontal List With Thumbnail
.sf-loader.-skeleton.-list-with-thumb
Html
<div class="sf-loader -skeleton -list-with-thumb">
<div class="sf-loader__content">
</div>
</div>17.4 #Loader.loader-big Loader Big
.sf-loader.-big
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>17.5 #Loader.mini Loader Mini
.sf-loader.-mini
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>17.6 #Loader.Progressbar Loader Progressbar
.sf-loader.-progressbar
Html
<div class="sf-loader -progressbar">
<div class="sf-loader__content">
</div>
</div>17.7 #Loader.side-content Loader Skeleton side-content
.sf-loader.-skeleton.-side-content.-darker
Html
<div class="sf-loader -skeleton -side-content -darker">
<div class="sf-loader__content">
</div>
</div>17.8 #Loader.Skeleton-Content Loader Skeleton Content: `.sf-loader.-skeleton.-content`
Html
<div class="sf-loader -skeleton -content">
<div class="sf-loader__content">
</div>
</div>17.9 #Loader.Skeleton-Horizontal-List Loader Skeleton Horizontal List
.sf-loader.-skeleton.-list-horizontal
Html
<div class="sf-loader -skeleton -list-horizontal">
<div class="sf-loader__content">
</div>
</div>17.10 #Loader.Skeleton-List Loader Skeleton List
.sf-loader.-skeleton.-list
Html
<div class="sf-loader -skeleton -list">
<div class="sf-loader__content">
</div>
</div>17.11 #Loader.Skeleton-Title Loader Skeleton Title
.sf-loader.-skeleton.-title
Html
<div class="sf-loader -skeleton -title">
<div class="sf-loader__content">
</div>
</div>