Cómo crear barras de habilidades con jQuery y CSS

Un gráfico de barras representa un grupo de datos mediante barras horizontales o verticales. Basicamente, el gráfico de barras se suele utilizar para mostrar una comparación de datos que se puedan entender de forma sencilla. Por ejemplo, si quieres comparar datos de porcentajes entre categorías, el gráfico de barras es la mejor opción.

En este tuorial te mostraremos cómo crear un gráfico de barras responsive mediante jQuery y CSS. No necesitaremos ningún plugin de gráficos para implementar este ejemplo, solamente jQuery y CSS. Utilizaremos este gráfico de barras para crear barras de habilidades, las cuales habrás visto en multitud de portfolios y currículums.

Una vez dicho todo esto, vamos a empezar a crear nuestras barras de habilidades.

Código HTML

El siguiente HTML mostrará el gráfico de barras con porcentajes. También, debajo de cada barra aparecerá su respectiva etiqueta.

<div class="container">
    <h2>Levels of Expertise</h2>
    <div class="bar-chart">
        <!-- legend label -->
        <div class="legend">
            <div class="label">
                <h4>Beginner</h4>
            </div>
            <div class="label">
                <h4>Intermediate</h4>
            </div>
            <div class="label">
                <h4>Proficient</h4>
            </div>
            <div class="label last">
                <h4>Expert</h4>
            </div>
        </div>
        
        <!-- bars -->
        <div class="chart clearfix">
            <div class="item">
                <div class="bar">
                    <span class="percent">85%</span>
    
                    <div class="progress" data-percent="85">
                        <span class="title">PHP KNOWLEDGE</span>
                    </div>
                </div>
            </div>
            
            <div class="item">
                <div class="bar">
                    <span class="percent">68%</span>
    
                    <div class="progress" data-percent="68">
                        <span class="title">MySQL KNOWLEDGE</span>
                    </div>
                </div>
            </div>
            
            <div class="item">
                <div class="bar">
                    <span class="percent">59%</span>
    
                    <div class="progress" data-percent="59">
                        <span class="title">JavaScript KNOWLEDGE</span>
                    </div>
                </div>
            </div>
    
            <div class="item">
                <div class="bar">
                    <span class="percent">91%</span>
    
                    <div class="progress" data-percent="91">
                        <span class="title">HTML&CSS KNOWLEDGE</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Código Javascript

Lo primero que tenemos que hacer es añadir la librería jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Utilizaremos la función barChart() para asignar el ancho de cada una de las barras en función de su porcentaje. Llamaremos a la función barChart() cuando la página termine de cargarse, o bien cuando se redimensione la ventana.

<script>
$(document).ready(function(){
    barChart();
    
    $(window).resize(function(){
        barChart();
    });
    
    function barChart(){
        $('.bar-chart').find('.progress').each(function(){
            var itemProgress = $(this),
            itemProgressWidth = $(this).parent().width() * ($(this).data('percent') / 100);
            itemProgress.css('width', itemProgressWidth);
        });
    }
});
</script>

Código CSS

El siguiente CSS lo utilizaremos para dar estilo a nuestro gráfico de barras y, también, para hacerlo responsive.

.bar-chart {
    position: relative;
    width: 100%;
    margin-top: 15px;
    padding-bottom: 1px;
}
.bar-chart > .legend {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    margin-bottom: -45px;
    border-top: 1px solid #000;
}
.bar-chart > .legend > .label {
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
}
.bar-chart > .legend > .label:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}
.bar-chart > .legend > .label.last:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    content: '';
    width: 1px;
    height: 8px;
    background-color: #000;
    margin-top: -8px;
}
.bar-chart > .legend > .label h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bar-chart > .chart {
    position: relative;
    width: 100%;
}
.bar-chart > .chart > .item {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
}
.bar-chart > .chart > .item > .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff4081;
    z-index: 5;
}
.bar-chart > .chart > .item > .bar > .percent {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    padding-right: 12px;
    z-index: 15;
}
.bar-chart > .chart > .item > .bar > .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #3e50b4;
    z-index: 10;
}
.bar-chart > .chart > .item > .bar > .progress > .title {
    display: block;
    position: absolute;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    letter-spacing: 2px;
    z-index: 15;
}

Fuente: codexworld.com