Docs Progressbar || Sandbox - Modern & Multipurpose Nuxtjs Template

Line

Available color options:

primary, aqua, green, leaf, navy, orange, pink, purple, red, violet, yellow, fuchsia, sky, grape, soft-primary, soft-aqua, soft-green, soft-leaf, soft-navy, soft-orange, soft-pink, soft-purple, soft-red, soft-violet, soft-yellow, soft-fuchsia, soft-sky, soft-grape

Marketing
0 %
Strategy
0 %
Development
0 %
Stabilization
0 %

Marketing
0 %
Strategy
0 %
Development
0 %
Stabilization
0 %

View example's code


              <ul class="progress-list">
                <li>
                  <p>Marketing</p>
                  <div class="progressbar line soft-blue">
                    <CommonLineProgressbar :max="100" />
                    <!-- Component for line progressbar with animation from omponents>common>CommonLineProgressbar -->
                  </div>
                </li>
                <li>
                  <p>Strategy</p>
                  <div class="progressbar line soft-green">
                    <CommonLineProgressbar :max="80" />
                    <!-- Component for line progressbar with animation from omponents>common>CommonLineProgressbar -->
                  </div>
                </li>
                <li>
                  <p>Development</p>
                  <div class="progressbar line soft-red">
                    <CommonLineProgressbar :max="85" />
                    <!-- Component for line progressbar with animation from omponents>common>CommonLineProgressbar -->
                  </div>
                </li>
                <li>
                  <p>Stabilization</p>
                  <div class="progressbar line soft-yellow">
                    <CommonLineProgressbar :max="75" />
                    <!-- Component for line progressbar with animation from omponents>common>CommonLineProgressbar -->
                  </div>
                </li>
              </ul>

Semi Circle

Available color options:

View example's code


          <div class="row gy-6 text-center">
            <div class="col-md-6 col-lg-3">
              <div class="progressbar semi-circle blue" data-value="40">
                <CommonCircleProgressbar :max="40" />
                <!-- Component for circuler progressbar with animation from omponents>common>CircleProgressbar -->
              </div>
            </div>
            <!-- /column -->
            <div class="col-md-6 col-lg-3">
              <div class="progressbar semi-circle green" data-value="40">
                <CommonCircleProgressbar :max="80" />
                <!-- Component for circuler progressbar with animation from omponents>common>CircleProgressbar -->
              </div>
            </div>
            <!-- /column -->
            <div class="col-md-6 col-lg-3">
              <div class="progressbar semi-circle soft-red" data-value="40">
                <CommonCircleProgressbar :max="65" />
                <!-- Component for circuler progressbar with animation from omponents>common>CircleProgressbar -->
              </div>
            </div>
            <!-- /column -->
            <div class="col-md-6 col-lg-3">
              <div class="progressbar semi-circle soft-yellow" data-value="40">
                <CommonCircleProgressbar :max="45" />
                <!-- Component for circuler progressbar with animation from omponents>common>CircleProgressbar -->
              </div>
            </div>
            <!-- /column -->
          </div>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox Nuxtjs

Project Pages

Single Projects

Usage

Styleguide

Elements

Line

Semi Circle

Think unique and be creative. Make a difference with Sandbox.