Progress Bar Blocks for Web-Boots Theme – Create horizontal and circle progress bars
Progress bars are the easy way to showcase your skills and work completion. Here is code blocks for horizontal and circle progress bars for Web-Boots theme.
Note: Ensure to replace the text, image and video content in the demo code with your own content.
1. Horizontal Progress Bars
<section class="progress-bars2 cid-rkNIGoms9L" id="progress-bars2-g">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Horizontal progress bars with text block
</h2>
<h3 class="wn-section-subtitle wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="row pt-5 mt-5">
<div class="col-md-6 text-elements">
<h4 class="section-content-title pb-3 align-left wn-fonts-style display-5">
A modular approach
</h4>
<p class="section-content-text align-left wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="progress_elements col-md-6">
<div class="progress1 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Google</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary " max="100" value="100">
</progress>
</div>
<div class="progress2 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Microsoft</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary" max="100" value="90">
</progress>
</div>
<div class="progress3 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Apple</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary" max="100" value="80">
</progress>
</div>
</div>
</div>
</div>
</section>2. Horizontal Progress Bars with Text Block
<section class="progress-bars2 cid-rkNIGoms9L" id="progress-bars2-g">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Horizontal progress bars with text block
</h2>
<h3 class="wn-section-subtitle wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="row pt-5 mt-5">
<div class="col-md-6 text-elements">
<h4 class="section-content-title pb-3 align-left wn-fonts-style display-5">
A modular approach
</h4>
<p class="section-content-text align-left wn-fonts-style display-7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="progress_elements col-md-6">
<div class="progress1 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Google</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary " max="100" value="100">
</progress>
</div>
<div class="progress2 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Microsoft</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary" max="100" value="90">
</progress>
</div>
<div class="progress3 pb-5">
<div class="title-wrap">
<div class="progressbar-title wn-fonts-style display-7">
<p>
Apple</p>
</div>
<div class="progress_value wn-fonts-style display-7">
<div class="progressbar-number">
</div>
<span>%</span>
</div>
</div>
<progress class="progress progress-primary" max="100" value="80">
</progress>
</div>
</div>
</div>
</div>
</section>3. Circle Progress Bars
<section class="progress-bars3 cid-rkNIHdWL7N" id="progress-bars3-h">
<div class="container">
<h2 class="wn-section-title pb-3 align-center wn-fonts-style display-2">
Circle progress bars
</h2>
<h3 class="wn-section-subtitle wn-fonts-style display-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<div class="media-container-row pt-5 mt-2">
<div class="card p-3 align-center">
<div class="wrap">
<div class="pie_progress progress1" role="progressbar" data-goal="50">
<p class="pie_progress__number wn-fonts-style display-5"></p>
</div>
</div>
<div class="wn-crt-title pt-3">
<h4 class="card-title py-2 wn-fonts-style display-5">
WordPress</h4>
</div>
</div>
<div class="card p-3 align-center">
<div class="wrap">
<div class="pie_progress progress2" role="progressbar" data-goal="60">
<p class="pie_progress__number wn-fonts-style display-5"></p>
</div>
</div>
<div class="wn-crt-title pt-3">
<h4 class="card-title py-2 wn-fonts-style display-5">
Google</h4>
</div>
</div>
<div class="card p-3 align-center">
<div class="wrap">
<div class="pie_progress progress3" role="progressbar" data-goal="70">
<p class="pie_progress__number wn-fonts-style display-5"></p>
</div>
</div>
<div class="wn-crt-title pt-3">
<h4 class="card-title py-2 wn-fonts-style display-5">
Microsoft</h4>
</div>
</div>
</div>
</div>
</section>