8.1 #Loader.1-spinner Spin loader
Spin border style loader.
Example
Loading... Loading... Loading... Loading...
Markup
<p>
<span class="duk-loader--spin"><span>Loading...</span></span>
<span class="duk-loader--spin duk-text--primary"><span>Loading...</span></span>
<span class="duk-loader--spin duk-text--secondary"><span>Loading...</span></span>
<span class="duk-loader--spin duk-text--tertiary"><span>Loading...</span></span>
</p>
Source:
scss/objects/_loader.scss, line 4
8.2 #Loader.2-grow Grow loader
Grow style loader.
Example
Loading... Loading... Loading... Loading...
Markup
<p>
<span class="duk-loader--grow"><span>Loading...</span></span>
<span class="duk-loader--grow duk-text--primary"><span>Loading...</span></span>
<span class="duk-loader--grow duk-text--secondary"><span>Loading...</span></span>
<span class="duk-loader--grow duk-text--tertiary"><span>Loading...</span></span>
</p>
Source:
scss/objects/_loader.scss, line 30
8.3 #Loader.3-line Line loader
Youtube style line loader.
Example
Loaded 50%...
Loaded 50%...
Loaded 50%...
Loaded 50%...
Markup
<div class="duk-loader--line">
<div><span>Loaded 50%...</span></div>
</div><br />
<div class="duk-loader--line duk-text--primary">
<div><span>Loaded 50%...</span></div>
</div><br />
<div class="duk-loader--line duk-text--secondary">
<div><span>Loaded 50%...</span></div>
</div><br />
<div class="duk-loader--line duk-text--tertiary">
<div><span>Loaded 50%...</span></div>
</div>
Source:
scss/objects/_loader.scss, line 56