My fifth feature block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/cx78ww6zsot5lhk/project.mobirise?dl=1

HTML Code Snippet:

<section class="progress-bars3" group="Progress" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="8">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="3">
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="color" title="Progress Color" name="progressColor" value="#ffb901">
        <input type="checkbox" title="Gradient Progress" name="gradientProgress">
        <input type="color" title="Progress Color 2" name="progressColor2" value="#52e2dd" condition="gradientProgress">
        <select title="Progress count" name="progressCount">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4" selected>4</option>
            <option value="5">5</option>
        </select>
        <input type="range" inline title="Progress 1" name="progress1" min="0" max="100" step="1" value="85">
        <input type="range" inline title="Progress 2" name="progress2" min="0" max="100" step="1" value="60" condition="progressCount>1">
        <input type="range" inline title="Progress 3" name="progress3" min="0" max="100" step="1" value="70" condition="progressCount>2">
        <input type="range" inline title="Progress 4" name="progress4" min="0" max="100" step="1" value="40" condition="progressCount>3">
        <input type="range" inline title="Progress 5" name="progress5" min="0" max="100" step="1" value="60" condition="progressCount>4">
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="#" selected>
            <input type="color" title="Background Color" value="#ffffff" selected>
            <input type="video" title="Background Video" value="https://www.youtube.com/watch?v=E0Pa8tYo94U">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#926150" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.4" condition="overlay && bg.type !== 'color'">
        <!-- End block parameters -->
    </mbr-parameters>
    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-6 text-elements pb-5">
                <h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2" mbr-if="showTitle" data-app-selector=".mbr-section-title">We have the experience needed to take on your project.</h2>
                <p class="section-content-text align-left mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".section-content-text">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
            <div class="progress_elements col-md-6 pb-5 mt">
                <div class="progress1 pb-5">
                    <div class="progress-container">
                        <span mbr-text class="progress-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".progress-title,.progress_value,.progress_value span"><b>RENOVATION</b></span>
                        <div class="progress_value">
                            <div class="progressbar-number"></div>
                            <span>%</span>
                        </div>
                        <progress class="progress progress-primary" value="{{progress1}}" max="100">
                        </progress>
                    </div>
                </div>
                <div class="progress2 pb-5 pt-3" mbr-if="progressCount>1">
                    <div class="progress-container">
                        <span mbr-text class="progress-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".progress-title,.progress_value,.progress_value span"><b>CONTRACTING</b></span>
                        <div class="progress_value">
                            <div class="progressbar-number"></div>
                            <span>%</span>
                        </div>
                        <progress class="progress progress-primary" value="{{progress2}}" max="100">
                        </progress>
                    </div>
                </div>
                <div class="progress3 pb-5 pt-3" mbr-if="progressCount>2">
                    <div class="progress-container">
                        <span mbr-text class="progress-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".progress-title,.progress_value,.progress_value span"><b>
                              CONSULTATION</b></span>
                        <div class="progress_value">
                            <div class="progressbar-number"></div>
                            <span>%</span>
                        </div>
                        <progress class="progress progress-primary" value="{{progress3}}" max="100">
                        </progress>
                    </div>
                </div>
                <div class="progress4 pb-5 pt-3" mbr-if="progressCount>3">
                    <div class="progress-container">
                        <span mbr-text class="progress-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".progress-title,.progress_value,.progress_value span"><b>GREEN BUILDING</b></span>
                        <div class="progress_value">
                            <div class="progressbar-number"></div>
                            <span>%</span>
                        </div>
                        <progress class="progress progress-primary" value="{{progress4}}" max="100">
                        </progress>
                    </div>
                </div>
                <div class="progress5 pb-5 pt-3" mbr-if="progressCount>4">
                    <div class="progress-container">
                        <span mbr-text class="progress-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".progress-title,.progress_value,.progress_value span">
                              Online Solution
                        </span>
                        <div class="progress_value">
                            <div class="progressbar-number"></div>
                            <span>%</span>
                        </div>
                        <progress class="progress progress-primary" value="{{progress5}}" max="100">
                        </progress>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS Code Snippet:

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
.progress {
  width: 100%;
}
.title-wrap {
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
progress {
  height: inherit;
}
.progressbar-number {
  display: inline-block;
}
.progress-primary {
  background: rgba(206, 206, 206, 0.4);
  border: none;
  outline: none;
}
.progress-primary::-webkit-progress-bar {
  background: rgba(206, 206, 206, 0.4);
}
.section-content-title {
  font-weight: 500;
  line-height: 1.2;
}
.progress_value {
  position: relative;
  font-weight: 500;
}
.progress1 .progressbar-number:before, .progress2 .progressbar-number:before, .progress3 .progressbar-number:before, .progress4 .progressbar-number:before, .progress5 .progressbar-number:before {
  position: absolute;
  right: 15px;
  top: 0;
}
progress[value]::-webkit-progress-bar {
  background: rgba(206, 206, 206, 0.4);
}
progress::-webkit-progress-value {
  background: @progressColor;
  & when (@gradientProgress) {
    background: linear-gradient(90deg, @progressColor, @progressColor2);
  }
}
progress[value]::-moz-progress-bar {
  background: @progressColor;
  & when (@gradientProgress) {
    background: linear-gradient(90deg, @progressColor, @progressColor2);
  }
}
progress::-ms-fill {
  background: @progressColor;
  & when (@gradientProgress) {
    background: linear-gradient(90deg, @progressColor, @progressColor2);
  }
}
.progress1 .progressbar-number:before {
  content: '@{progress1}';
}
.progress2 .progressbar-number:before {
  content: '@{progress2}';
}
.progress3 .progressbar-number:before {
  content: '@{progress3}';
}
.progress4 .progressbar-number:before {
  content: '@{progress4}';
}
.progress5 .progressbar-number:before {
  content: '@{progress5}';
}
.progress-container {
  display: -webkit-flex;
  align-items: center;
  position: relative;
  height: 0.5rem;
  width: 100%;
  -webkit-align-items: center;
  span.progress-title {
    position: absolute;
    top: -2rem;
    font-size: 0.875rem !important;
    height: 24px;
    overflow: hidden;
    max-width: 85%;
  }
  .progress_value {
    position: absolute;
    top: -2rem;
    right: 0;
    font-size: 1rem !important;
  }
}
@media (min-width: 768px) {
  .text-elements {
    padding-right: 2.5rem;
  }
  .progress_elements {
    padding-left: 2.5rem;
  }
}
.mbr-section-title {
  color: #141414;
}
.mbr-fonts-style {
  font-weight: 400;
}
.section-content-text {
  color: #999999;
}
.progress-title,.progress_value,.progress_value span {
  color: #141414;
}
.mt {
  margin-top: 2rem;
}