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 default (grey)
Progress bar Green
Progress bar Blue
Progress bar Yellow
Progress bar Red
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 default (grey)
Progress bar Green
Progress bar Blue
Progress bar Yellow
Progress bar Red
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