Alert & Progress
Alert
Alert Default
<!-- color choise alert-box -> default color alert-box blue -> blue color alert-box green -> green color alert-box yellow -> yellow color alert-box red -> red color --> <div class="alert-box">[...]</div>
This is default alert message
×
This is information alert message
×
This is success alert message
×
This is warning alert message
×
This is error alert message
×
Alert Radius
<div class="alert-box radius">[...]</div>
This is default alert message
×
This is information alert message
×
This is success alert message
×
This is warning alert message
×
This is error alert message
×
Alert Rounded
<div class="alert-box round">[...]</div>
This is default alert message
×
This is information alert message
×
This is success alert message
×
This is warning alert message
×
This is error alert message
×
Progress Bar
Progress Bar default style
<div class="progress-bar" data-percent="70">
<div class="progress-content">
<span class="progress-title">[...]</span>
</div>
</div>
<!-- available color choise
<div class="progress-content"> -> default color
<div class="progress-content blue"> -> blue color
<div class="progress-content green"> -> green color
<div class="progress-content yellow"> -> yellow color
<div class="progress-content red"> -> red color
-->
Progress Bar thin style
<div class="progress-bar thin" data-percent="70">
<div class="progress-content">
<span class="progress-title">[...]</span>
</div>
</div>
<!-- available color choise
<div class="progress-content"> -> default color
<div class="progress-content blue"> -> blue color
<div class="progress-content green"> -> green color
<div class="progress-content yellow"> -> yellow color
<div class="progress-content red"> -> red color
-->
Progress Bar thin (thermo) style
<div class="progress-bar thermo" data-percent="70">
<div class="progress-content">
<span class="progress-title">[...]</span>
</div>
</div>
<!-- available color choise
<div class="progress-content"> -> default color
<div class="progress-content blue"> -> blue color
<div class="progress-content green"> -> green color
<div class="progress-content yellow"> -> yellow color
<div class="progress-content red"> -> red color
-->
Chart Default
<div class="large-3 medium-3 columns"> <div class="chart" data-percent="70"></div> <p>Chart Default</p> </div> <!-- available color choise <div class="chart"> -> default color <div class="chart-blue"> -> blue color <div class="chart-green"> -> green color <div class="chart-yellow"> -> yellow color <div class="chart-red"> -> red color -->
Chart Default
Chart Green
Chart Blue
Chart Yellow
Chart Red
Chart White
Chart Styling
<div class="large-3 medium-3 columns"> <div class="chart2" data-percent="70"></div> <p>Chart Default</p> </div> <!-- available color choise <div class="chart2"> -> default color <div class="chart2-blue"> -> blue color <div class="chart2-green"> -> green color <div class="chart2-yellow"> -> yellow color <div class="chart2-red"> -> red color -->
Chart Green
Chart Blue
Chart Green
Chart Yellow
Chart Red
Chart White