Skill

Style 1

Why Choose wright HTML Template

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam voluptua ater vero. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumys eirmod tempor empor invidunt ut labore et dolore.

Strategy 79%

Marketing 96%

Wordpress Theme 65%

UI/UX Design 92%

                
<!--our skill section area start-->
    <div class="skill-area pb-80">
        <div class="">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="skill-about">
                        <div class="section-title roboto">
                            <h1>Why Choose <span>wright </span>HTML Template</h1>
                        </div>
                        <div class="skill-content">
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                diam nonumy eirmod tempor invidunt ut labore et dolore
                                magna aliquyam erat.<span> sed diam voluptua ater vero.
                                    Lorem ipsum dolor sit amet, consetetur sadipscing
                                    elitr, sed diam nonumys eirmod tempor empor invidunt ut
                                    labore et dolore.</span></p>
                        </div>
                        <a class="single-btn" href="#">Read More<i class="zmdi zmdi-long-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="powerfull-skills">
                        <div class="single-prograss">
                            <div class="progess-heading">
                                Strategy <span>79%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar pr-blue wow fadeInLeft" style="width:79%"
                                    data-wow-duration="2s" data-wow-delay="1s">
                                </div>
                            </div>
                        </div>
                        <div class="single-prograss">
                            <div class="progess-heading">
                                Marketing <span>96%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar pr-green wow fadeInLeft" style="width:96%"
                                    data-wow-duration="2s" data-wow-delay="1s">
                                </div>
                            </div>
                        </div>
                        <div class="single-prograss">
                            <div class="progess-heading pr-voilate">
                                Wordpress Theme <span>65%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar pr-violate wow fadeInLeft" style="width:65%"
                                    data-wow-duration="2s" data-wow-delay="1s">
                                </div>
                            </div>
                        </div>
                        <div class="single-prograss">
                            <div class="progess-heading">
                                UI/UX Design <span>92%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar pr-ornage wow fadeInLeft" style="width:92%"
                                    data-wow-duration="2s" data-wow-delay="1s">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!--our skill section area end-->

                

/* out-skill area */
.progress {
  height: 5px;
}
.progess-heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 12px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.pr-blue {
  background: #2395EC none repeat scroll 0 0;
}
.pr-green {
  background: #98C830 none repeat scroll 0 0;
}
.pr-violate {
  background: #908BD5 none repeat scroll 0 0;
}
.pr-ornage {
  background: #E69020 none repeat scroll 0 0;
}
.skill-content > p {
  font-size: 15px;
}
.single-btn i {
  margin-left: 5px;
  position: relative;
  top: 2px;
}
.skill-area .section-title h1 {
  margin: 0 0 30px;
}

Style 2

Incredible Skills

UI/UX Design

WordPress Development

Graphic Design

Responsive Devices

                
<!--our skill section area start-->
<div class="our-skill-area">
    <div class="section-title text-center secton-title-2 uppercase roboto">
        <h1>Incredible<span> Skills</span></h1>
    </div>
    <div class="row">
        <!-- single-skill start -->
        <div class="col-12 col-md-6 col-lg-3 col-xl-3">
            <div class="single-skill text-center">
                <div class="progress-circular">
                    <input type="text" class="knob" value="0" data-rel="87"
                            data-linecap="round" data-width="225" data-height="225"
                            data-bgcolor="#E5E5E5" data-fgcolor="#2395EC" data-thickness=".08"
                            data-readonly="true" disabled>
                    <h4 class="progress-h4">UI/UX Design</h4>
                </div>
            </div>
        </div>
        <!-- single-skill end -->
        <!-- single-skill start -->
        <div class="col-12 col-md-6 col-lg-3 col-xl-3">
            <div class="single-skill text-center">
                <div class="progress-circular">
                    <input type="text" class="knob" value="0" data-rel="93"
                            data-linecap="round" data-width="225" data-height="225"
                            data-bgcolor="#E5E5E5" data-fgcolor="#8F8BD5" data-thickness=".08"
                            data-readonly="true" disabled>
                    <h4 class="progress-h4">WordPress Development</h4>
                </div>
            </div>
        </div>
        <!-- single-skill end -->
        <!-- single-skill start -->
        <div class="col-12 col-md-6 col-lg-3 col-xl-3">
            <div class="single-skill text-center">
                <div class="progress-circular">
                    <input type="text" class="knob" value="0" data-rel="62"
                            data-linecap="round" data-width="225" data-height="225"
                            data-bgcolor="#E5E5E5" data-fgcolor="#A3CE47" data-thickness=".08"
                            data-readonly="true" disabled>
                    <h4 class="progress-h4">Graphic Design</h4>
                </div>
            </div>
        </div>
        <!-- single-skill end -->
        <!-- single-skill start -->
        <div class="col-12 col-md-6 col-lg-3 col-xl-3">
            <div class="single-skill">
                <div class="progress-circular text-center">
                    <input type="text" class="knob" value="0" data-rel="100"
                            data-linecap="round" data-width="225" data-height="225"
                            data-bgcolor="#E5E5E5" data-fgcolor="#E69020" data-thickness=".08"
                            data-readonly="true" disabled>
                    <h4 class="progress-h4">Responsive Devices</h4>
                </div>
            </div>
        </div>
        <!-- single-skill end -->
    </div>
</div>
<!--our skill section area end-->

                
/* ===increadible skill==== */
.progress-h4 {
  color: #171819;
  font-size: 16px;
  letter-spacing: 0.8px;
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: uppercase;
}

		
/*---------------------
Circular Bars - Knob
--------------------- */	
if(typeof($.fn.knob) != 'undefined') {
$('.knob').each(function () {
var $this = $(this),
knobVal = $this.attr('data-rel');

$this.knob({
'draw' : function () { 
$(this.i).val(this.cv + '%')
}
});

$this.appear(function() {
$({
value: 0
}).animate({
value: knobVal
}, {
duration : 2000,
easing   : 'swing',
step     : function () {
$this.val(Math.ceil(this.value)).trigger('change');
}
});
}, {accX: 0, accY: -150});
});
}