Créer des barres de progressions pour comptabiliser ses articles

Créer des barres de progressions pour comptabiliser ses articles

Voici ce à quoi nous voulons parvenir : a l’intérieur d’une section, on insère des barres de progression qui vont indiquer au visiteur le nombre, en pourcentage, d’articles par catégorie. C’est le genre de chose que l’on voit souvent sur les portfolios et de nombreux thèmes premium wordpress.

Voici mon bloc, on crée une boucle pour comptabiliser le nombre d’articles par catégories.

<section id="nbr_count" class="section_half">
				<div class="flex justify-content-center align-items-center h-100">
					<div class="col-span-6 center p-30">			
						<?php
						$paris_description = get_bloginfo( 'description', 'display' );
						if ( $paris_description || is_customize_preview() ) :
						;?>
						<h2 class="home_site-description"><?php echo $paris_description; /* WPCS: xss ok. */ ?></h2>
						<?php endif; ?>
						<div class="divider"></div>
						<div class="site-presentation">
							<p>bloc de texte</p>
						</div>
					</div>
					<div class="col-span-6">
					  <h2>Vos visites</h2>
					    <ul id="nbr">
					    	<?php $categories = get_categories();
					    	$total_posts = 0;
							foreach ($categories as $category){ 
								$total_posts += $category->count ;	
								}
								 $total_check = 0;
							foreach ($categories as $category) {
							
							$percentage = round( (($category->count / $total_posts)*100) );
							// Just checking to see if they will add up to 100 at the end
							$total_check += $percentage;?>
					    	<li class="nbr clearfix " data-percent="<?php echo $percentage  ;?>%">
							    <span class="nbr-title"><span><?php echo $category->name  ;?></span></span>
							    <span class="nbr-bar"></span>
							    <span class="nbr-bar-percent"><?php echo $percentage ;?>%</span>
							</li> 
							<?php 
							    // Just checking to see that they all add up to 100, delete or comment out afterward
							   
							} ;?> 
						</ul>
					</div>
					</div>
			</section>

Et voici le jquery, qui lance la progression une fois que la section se trouve dans le view port.

/*--------------------------------------------------------------
## SECTION NBR
--------------------------------------------------------------*/
jQuery(document).ready(function($){
    var counterTeaserL = $('#nbr_count');
    var winHeight = $(window).height();
    if (counterTeaserL.length) {
        var firEvent = false,
        objectPosTop = $('#nbr_count').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
        $(window).on('scroll', function() {
            var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
            if (currentPosition > elementViewInBottom && firEvent === false) {
            firEvent = true;
            nbrCounter();
            }   
        });
    }
    function nbrCounter(){
        $('.nbr').each(function(){
            $(this).find('.nbr-bar').animate({
                width:$(this).attr('data-percent')
            },3000);
        });
    };
});

Voici le css pour avoir rapidement un rendu similaire à celui de l’image

/*--------------------------------------------------------------
## SECTION SKILLS
--------------------------------------------------------------*/

.nbr {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}
.nbr-title {
    position:absolute;
    top:0;
    left:0;
    font-weight:bold;
    font-size:13px;
    color:#fff;
    
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.nbr-title span {
    display:block;
    padding:0 20px;
    height:35px;
    line-height:35px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.nbr-bar {
    height:35px;
    width:0%;
    background:#527096;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

.nbr-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#444;
    color:rgba(0, 0, 0, 0.4);
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.