Avec les derniers ajouts aux spécifications HTML et CSS, les développeurs Web peuvent créer des composants magnifiques et faciles à utiliser. Parmi ces composants, les barres de progression / chargement peuvent aider à rendre votre site Web plus agréable pour vos visiteurs.

Indicateur de progression CSS pur

Ce didacticiel complet de développement Web frontal vous montrera comment apprendre à créer une barre de progression CSS / HTML5 sophistiquée.

Veuillez noter: La barre de progression CSS / HTML5 d’origine présentée dans ce didacticiel a été créée par Ivan Vanderbyldonnant à CatsWhoCode le droit de reproduire et de documenter son travail.

Les fichiers sources HTML et CSS de la barre de progression terminée peuvent être téléchargés à partir de Github.

Se préparer

Commençons à organiser notre travail. Pour ce tutoriel, nous devons créer 3 fichiers:

  • progress.htmlque notre balisage contiendra.
  • ui.css que nos styles CSS contiendront.
  • progress.js Cela inclura quelques animations jQuery supplémentaires.

La première étape consiste à créer un nouveau répertoire sur votre serveur Web ou votre disque dur et à créer les trois fichiers qui forment ensemble l’épine dorsale de notre barre HTML / CSS.

Le balisage HTML

Nous y voilà. Ouvrez votre progress.html Classez et collez le balisage HTML suivant:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pure CSS Progress Bar</title>

	<link rel="stylesheet" href="https://catswhocode.com/css-progress-bar/stylesheets/ui.css">
	<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
</head>
<body>
	<div id="container">
		<div id="progress_bar" class="ui-progress-bar ui-container">
        	<div class="ui-progress" style="width: 79%;">
				<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
      		</div><!-- .ui-progress -->
    	</div><!-- #progress_bar -->  

		<div class="content" id="main_content" style="display: none;">
	    	<p>Hello, World!</p>
	  	</div><!-- #main_content -->
	</div><!-- #container -->
</body>
</html>

Laissez-moi vous expliquer un peu le code: dans la première ligne, j’ai déclaré un doctype HTML5. Ensuite, les lignes 12 à 16 contiennent le balisage de la barre de progression elle-même. Si vous enregistrez le fichier et l’affichez maintenant dans votre navigateur, rien n’apparaîtra. Ne vous inquiétez pas, nous utiliserons la pure magie CSS dans une minute.

Immersion en CSS

Lorsque vous avez terminé la partie HTML, ouvrez la vôtre ui.css Classez et collez le code CSS suivant.

Il n’y a rien de spécial ici, juste quelques styles de base (que j’ai simplifiés à partir de la source d’origine) pour la mise en page.

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;

}

.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 

.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Ensuite, nous pouvons enfin faire des choses plus sérieuses. Le code suivant donnera vie à votre barre de progression HTML / CSS. Je vais vous expliquer comment cela fonctionne dans un instant. Tout d’abord, copiez-le et collez-le dans le vôtre ui.css Déposer.

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
   background-position: 44px 0;
  }
}      

.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        

.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
  -webkit-animation: animate-stripes 2s linear infinite;
}

Sauvez votre ui.css Classer et regarder progress.html dans votre navigateur Web. Si vous avez suivi attentivement les étapes précédentes de ce didacticiel, vous devriez voir une belle barre de progression réalisée sans utiliser d’image.

Comment ce code fonctionne-t-il dans tous les navigateurs? Voici l’explication:

Tout d’abord, nous avons deux classes CSS: .ui-progress-bar et .ui-progress. Le premier est le conteneur et le second est l’élément de progression lui-même.

  • Lignes 1 à 9: Ces lignes définissent une animation spécifique à Webkit que nous pouvons utiliser pour déplacer un élément d’un point à un autre. Pour plus d’informations sur les animations HTML et CSS Webkit, voir http://webkit.org/blog/324/css-animation-2/.
  • Ligne 16: le border-radius La propriété CSS3 vous permet de définir un rayon et d’obtenir des coins arrondis.
  • Ligne 17: Propriété spécifique à Mozilla pour border-radius.
  • Ligne 18: Propriété spécifique à Webkit pour border-radius.
  • Ligne 19: Utilisez la propriété -webkit-gradient pour ajouter un dégradé à un élément. Cela ne fonctionne qu’avec Webkit, les autres navigateurs ignorent cette propriété.
  • Ligne 20: Propriété spécifique à Mozilla, similaire à -webkit-gradient avec une syntaxe différente.
  • Lignes 21 à 23: box-shadow (et ses alternatives spécifiques au navigateur) vous permet d’ajouter une ombre à un élément.
  • Ligne 34: Propriété spécifique à Webkit basée sur la norme background-size Propriété avec laquelle vous pouvez spécifier la taille d’une image d’arrière-plan.
  • Ligne 56: Déclenche une animation Webkit définie à la ligne 1.

Touches finales: utilisation de jQuery pour animer les barres de progression

Les barres de progression CSS uniquement sont une chose très cool, mais comme les barres de progression sont destinées à montrer aux utilisateurs la progression, nous devons maintenant l’animer. Nous utiliserons le HTML CSS JavaScript Trio pour cela. En particulier, nous utiliserons jQuery.

Ouvrez votre progress.html Classez et collez les deux lignes juste au-dessus de la terminaison</body> Étiqueter.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="progress.js" type="text/javascript" charset="utf-8"></script>

Ce code charge jQuery de Google et de vous progress.js Fichier contenant le code requis pour animer la barre de progression. Bien sûr, vous pouvez utiliser votre version auto-hébergée de jQuery au lieu de la version hébergée par Google si vous préférez.

Maintenant, collez le code suivant dans votre progress.js Déposer:

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});

Lorsque vous avez enregistré le fichier, recherchez-le progress.html via votre navigateur web: Comme vous pouvez le voir, la barre de progression est désormais animée grâce à jQuery ainsi qu’à HTML et CSS.

Ce code JavaScript déplace la barre de progression de 0 à 100. Une fois que 100 est atteint, un message personnalisé sera affiché. Ce didacticiel sur la barre de progression fera un Bonjour le monde sera affiché. Ce message peut être modifié en éditant le progress.html Déposer.

Félicitations pour avoir terminé ce didacticiel! Vous savez maintenant comment créer des barres de progression HTML / CSS.

Questions fréquemment posées

Tutoriel CSS

Comment changer la couleur de ma barre de progression en CSS?

Vous devez éditer ça background et background-color Propriétés du .ui-progress-bar Classer.

Y a-t-il des barres de progression dans Bootstrap?

Oui. Bootstrap offre aux développeurs Web une large gamme de barres de progression CSS et HTML / CSS / JavaScript. Pour plus d’informations, consultez cette page.

Où puis-je trouver plus d’exemples CSS?

CatsWhoCode propose un grand nombre d’exemples et de tutoriels CSS. Si vous avez apprécié notre tutoriel sur la barre de progression, vous pouvez également être intéressé par le nôtre Transition CSS conduite.



Source link

Recent Posts