Geniux

Progress Bar Shortcodes

Shortcode usage sample

Default Progress Bar

Progress-bar Primary
Progress-bar Success
Progress-bar Info
Progress-bar Warning
Progress-bar Danger
Progress-bar Dark

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Default Progress-bar -->
      <ul class='progress-wrapper'>
        <li class="progress-bar primary" data-width="100" data-target="100">Progress-bar Primary</li>
        <li class="progress-bar success" data-width="95" data-target="95">Progress-bar Success</li>
        <li class="progress-bar info" data-width="+58" data-target="58">Progress-bar Info</li>
        <li class="progress-bar warning" data-width="85" data-target="85">Progress-bar Warning</li>
        <li class="progress-bar danger" data-width="85" data-target="85">Progress-bar Danger</li>
        <li class="progress-bar dark" data-width="85" data-target="85">Progress-bar Dark</li>
      </ul>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Thin Progress Bar

thin-progress-bar primary
thin-progress-bar success
thin-progress-bar info
thin-progress-bar warning
thin-progress-bar danger
thin-progress-bar dark

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Thin Progress-bar-->
      <ul class="progress-wrapper">
        <li class="thin-progress-bar primary" data-width="100" data-target="100">thin-progress-bar primary</li>
        <li class="thin-progress-bar success" data-width="95" data-target="95">thin-progress-bar success</li>
        <li class="thin-progress-bar info" data-width="+58" data-target="58">thin-progress-bar info</li>
        <li class="thin-progress-bar warning" data-width="85" data-target="85">thin-progress-bar warning</li>
        <li class="thin-progress-bar danger" data-width="85" data-target="85">thin-progress-bar danger</li>
        <li class="thin-progress-bar dark" data-width="85" data-target="85">thin-progress-bar dark</li>
      </ul>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Circle Progress Bar

Primary

Success

Info

Warning

Show Code

<div class="container">
  <div class="row">
    <!-- Circle Progress -->
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle primary" data-percent="80">
            <div></div>
            <p>Primary</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle success" data-percent="65">
            <div></div>
            <p>Success</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle info" data-percent="85">
            <div></div>
            <p>Info</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle warning" data-percent="70">
            <div></div>
            <p>Warning</p>
        </div>
      </div>
    </div>
  </div><!-- ./row -->
</div><!-- ./container -->

Gradient Circle Progress Bar

Primary

Success

Warning

Danger

Show Code

<div class="container">
  <div class="row">
    <!-- Gradient Circle Progress -->
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle primary gradient" data-percent="90">
            <div></div>
            <p>Primary</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle success gradient" data-percent="65">
            <div></div>
            <p>Success</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle warning gradient" data-percent="85">
            <div></div>
            <p>Warning</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-12">
      <div class="circle-progress" data-animate="false">
        <div class="circle danger gradient" data-percent="70">
            <div></div>
            <p>Danger</p>
        </div>
      </div>
    </div>
  </div><!-- ./row -->
</div><!-- ./container -->

# Shortcodes 1

# Shortcodes 2

# Shortcodes 3

# Shortcodes 4

Progress Bar Shortcodes