Css Progress Bar
Voici une simple démonstration de la manière dont vous pouvez créer en utilisant la barre de progression animée pure css.L’astuce est très simple.
Nous avons besoin de 3 éléments, l’un contenant et 2 éléments imbriqués.
Le Concept
Nous allons mettre une image de fond refroidir dans le conteneur et de définir la hauteur et la largeur fixe.
Premier enfant (SPAN) agira comme une barre de progression.
Nous vous absolument position de deuxième enfant (EM) au-dessus de la barre de progression et le déplacement vers la gauche pour une valeur désirée. EM a la même origine que le conteneur afin qu’il donne un effet de l’arrêt à la barre de progression certain pourcentage.
Marquage
Pour le garder le plus significatif que possible, j’ai utilisé la liste de définition (DL) à la liste de plusieurs valeurs. Pour seule barre de progression vous pouvez utiliser n’importe quel élément que vous voulez. Dans mon exemple j’ai utilisé des P.
<dd> <span><em style= »left:100px »>50%</em></span> </dd> <dd> <span> <em Style= »left:100px »> 50% </ em> </ span> </ dd>
J’ai décidé d’utiliser les styles inline pour left EM placement. Il est plus facile d’écrire les deux valeurs au même endroit à la fois.
Animation
Comment cela est-il fait? Utilisation gif animé, bien sûr.
Rappelez-vous ces activités? N’importe quel pourcentage il va nous utilisons tout le trajet et les arrêts. Effet de l’arrêt à certain pourcentage est fait avec EM comme je l’ai mentionné plus tôt.
EM placement
Dans mon exemple, j’utilise 200 pixels de largeur de barre de progrès. EM est aussi un élément 200px de largeur. Donc, chaque pourcentage est 2px de large. Si nous voulons déplacer la précision EM nous avons besoin de multiplier les pourcentages par 2. C’est-à-dire 50% signifiera 100px compensée gauche, 24% se traduira par 48px offset, 75% – 150px etc Vous obtenez l’image.
css progress bar exemples
Détails animated-progress-bar
Loading ...