J'aimerais créer une barre de progression, sans utiliser d'image (ex : gif animé...). Est-ce que cela peut être fait avec seulement html, css et jquery ? Je ne sais pas si c'est possible, mais c'est une bonne idée.)
Mise à jour : le pourcentage de progression ne peut être déterminé, il s'agit donc d'une boucle
Une méthode "do-it yourself" : Il suffit de choisir une police à espacement unique et d'écrire une fonction pour mettre à jour une chaîne de caractères à afficher.
Par exemple. Chaîne de barres vierges
--------------------------------Avoir une variable qui stocke le début de l'offset
Lors de l'appel de cette fonction, en utilisant le décalage comme marqueur de départ, remplacer les positions par des caractères '>', par exemple, puis augmenter le décalage de 1 (ne pas oublier de moduler).
>>>>---->>>>---->>>>---->>>>----
->>>>---->>>>---->>>>---->>>>---
-->>>>---->>>>---->>>>---->>>>--
--->>>>---->>>>---->>>>---->>>>-
---->>>>---->>>>---->>>>---->>>>
>---->>>>---->>>>---->>>>---->>>
>>---->>>>---->>>>---->>>>---->>
>>>---->>>>---->>>>---->>>>---->Lors de l'affichage de la barre de progression, ajouter des tuyaux aux extrémités...
|>>>>---->>>>---->>>>---->>>>----|
|->>>>---->>>>---->>>>---->>>>---|
|-->>>>---->>>>---->>>>---->>>>--|
|--->>>>---->>>>---->>>>---->>>>-|
|---->>>>---->>>>---->>>>---->>>>|
|>---->>>>---->>>>---->>>>---->>>|
|>>---->>>>---->>>>---->>>>---->>|
|>>>---->>>>---->>>>---->>>>---->|Ajoutez quelques balises avec des couleurs CSS et vous obtiendrez une barre de progression défilante à la Vista, en ASCII.
Il existe de nombreux exemples sur le web de la manière de procéder avec CSS. Il existe également un plugin jquery ici : http://docs.jquery.com/UI/Progressbar
C'est ce qu'a dit Shamir, mais avec tout :
<html>
<head>
<style type="text/css">
#progress-bar-wrapper
{
border: 1px solid #000;
width: 500px;
height: 30px;
}
#progress-bar
{
background-color: #F00;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() { animateProgressBar() });
function animateProgressBar()
{
$("#progress-bar")
.css("width", "0%")
.animate(
{
width: "100%"
},
1500, //Speed of loading bar
animateProgressBar);
}
</script>
</head>
<body>
<div id="progress-bar-wrapper">
<div id="progress-bar"></div>
</div>
</body>
</html>
Vous pouvez utiliser une balise Div pour augmenter la hauteur.
Par exemple, si vous avez une balise div avec width:0px et que vous utilisez jQuery pour agrandir la taille de la balise div en fonction du pourcentage.
si votre progression est de 50 %, vous pouvez utiliser jQuery pour définir la largeur : 50 % ;
<div style='width:200px'>
<div style='width:50%'></div>
</div>Désolé, je ne peux pas vous aider pour jQuery, mais j'ai déjà fait quelque chose de similaire avec PHP.
Qu'est-ce qui ne va pas avec un GIF animé ? Étant donné que vous ne pouvez pas estimer le pourcentage de progression, l'utilisation d'une barre de progression n'a pas vraiment de sens. Vous pourriez animer un petit cochon qui construit un mur de briques autour de lui, puis un petit loup qui l'abat, et le faire tourner en boucle à l'infini. Cela aurait l'avantage supplémentaire d'attirer l'attention de l'individu moyen sur la nature de son travail.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
