Comment faire une barre de progression
Comment faire une barre de progression en html/css/javascript. Je n'ai pas vraiment envie d'utiliser le Flash. Quelque chose le long des lignes de ce qui peut être trouvé ici: http://dustincurtis.com/about.html
Tout ce que je veux vraiment, c'est une "barre de progression" qui change pour les valeurs que je donne en PHP. Quel serait votre, bien que le procès? Existe-il des bons tutoriels sur cette?
InformationsquelleAutor john mossel | 2010-10-17
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire par le contrôle de la largeur d'une div via css. Quelque chose d'à peu près le long de ces lignes:
Que la valeur de la largeur peuvent être envoyés à partir de php si vous le désirez.
Si vous utilisez HTML5 de son mieux pour rendre l'utilisation de
<progress>
tag qui a été nouvellement introduit.Ou créer une barre de progression de votre propre.
Exemple écrit dans le sencha
http://jqueryui.com/demos/progressbar/
Vérifier cela, il pourrait être ce dont vous avez besoin.
Vous pouvez utiliser
progressbar.js;
Animé contrôle de barre de progression et de minuscules graphique (graphique sparkline)Démo et télécharger lien
HTML à l'usage;
Javascript utilisation;
Fondamentalement, de son présent: Vous avez trois fichiers: Votre longue course script PHP, une barre de progression contrôlée par Javascript (@SapphireSun donne une option), et une progression de script. La partie la plus difficile est le Progrès de Script; votre longue script doit être en mesure de faire rapport de ses progrès sans communication directe vers les progrès de votre script. Cela peut être sous la forme de l'id de session est mappé à des progrès mètres, une base de données, ou le contrôle de ce qui n'est pas fini.
Le processus est simple:
J'ai essayé avec une simple barre de progression. Il n'est pas cliquable affiche juste le pourcentage réel. Il y a une bonne explication et code ici: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/
Voici ma démarche, j'ai essayé de rester mince:
HTML:
CSS:
Violon: ici
Infinitif barre de progression à l'aide de Javascript
Exemple http://fiddle.jshell.net/1kmum4du/
J'ai utilisé ce la barre de progression. Pour plus d'informations, vous pouvez passer à travers cette lien je.e de personnalisation, programmation etc.
Espère que cela peut être utile pour somenone.
Je sais suivantes ne fonctionne pas actuellement, car les navigateurs ne supportent pas encore, mais peut-être un jour ce sera vous aider:
Au moment de ce post
attr()
sur d'autres propriétés quecontent
est juste un Candidat De La Recommandation1. Dès qu'il est mis en œuvre, on pourrait créer une barre de progression avec un seul élément (comme le HTML 5<progress/>
, mais avec un meilleur style et options de texte à l'intérieur)et pur CSS
Ici est le ne fonctionne pas démo.
1 Ne peut pas imaginer pourquoi ce n'est pas implémenté dans n'importe quel navigateur. D'abord je pense que si vous avez la fonctionnalité pour
content
déjà, il ne devrait pas être trop dur à prolonger (mais bien sûr, je ne sais pas vraiment pour être honnête). Deuxièmement: ce qui précède est juste un bon exemple montrant comment la puissance de cette fonctionnalité peut-être. J'espère qu'ils commencent à le soutenir bientôt, ou il ne sera même pas partie de la spécification.Vous pouvez créer une barre de progression de n'importe quel élément html que vous pouvez définir un gradient. (Assez cool!) Dans l'exemple ci-dessous, l'arrière-plan d'un élément HTML est mis à jour avec un dégradé linéaire avec JavaScript:
PS j'ai mis les deux endroits
percentage
la même pour créer une ligne dure. Jouer avec la conception, vous pouvez même ajouter une bordure à obtenir que la classique barre de progression look 🙂https://jsfiddle.net/uoL8j147/1/
Vous permettre de recréer la barre de progression à l'aide de CSS3 animations pour lui donner un meilleur coup d'oeil.
JSFiddle Démo
HTML
CSS/CSS3
Vous pouvez utiliser ProgressBar.js. Pas de dépendances, facile API et prend en charge les principaux navigateurs.
Voir plus d'exemples de l'utilisation de la dans la page de démonstration.
Si vous avez besoin d'afficher et de masquer la barre de progression à l'intérieur de votre php et java script, puis de suivre cette étape.Sa solution complète, pas besoin de n'importe quelle bibliothèque etc.
Lien de l'Image: Télécharger l'image à partir d'ici
Bien que l'on peut créer une barre de progression à l'aide de la méthode setInterval et l'animation de sa largeur
Pour de meilleures performances, tandis que l'animation d'une barre de progression de la prise en compte compositeur seuls biens et de gérer le compte de couche.
Voici un exemple:
JS:
CSS:
HTML:
Vous pouvez utiliser setInterval pour créer une barre de progression.
JS:
CSS:
HTML: