Com dissenyar barres de progrés responsives amb HTML, CSS i JavaScript

Com Dissenyar Barres De Progres Responsives Amb Html Css I Javascript



Mentre creen formularis interactius i fàcils d'utilitzar o pàgines de portal al lloc, els desenvolupadors solen incorporar barres de progrés responsives que són atractives i informen l'usuari de l'estat completat del formulari o creen un perfil. Aquest tipus de funcionalitats són de gran ajuda per millorar l'experiència de l'usuari d'un lloc específic.

Aquest bloc tracta els següents aspectes:







Què és una barra de progrés sensible?

En aquesta barra de progrés particular, un formulari gran es divideix en diversos passos. Aquesta barra notifica als visitants l'estat dels formularis emplenats i restants.



Com dissenyar una barra de progrés responsiva utilitzant HTML, CSS i JavaScript?

Es pot dissenyar una barra de progrés sensible amb l'ajuda d'HTML, CSS i JavaScript. Per fer-ho, consulteu el codi següent. Primer, aprofundeix en la part HTML del codi, de la següent manera:



< h2 estil = 'text-align: center;' > Barra de progrés sensible h2 >
< div id = 'progrés, progressar' >
< div id = 'progrés 1' > div >
< ul id = 'progrés2' >
< això classe = 'pas actiu' > 1 això >
< això classe = 'pas' > 2 això >
< això classe = 'pas' > 3 això >
< això classe = 'pas' > Final això >
ul >
div >
< botó id = 'progrés enrere' classe = 'btn' discapacitat > esquena botó >
< botó id = 'progrés següent' classe = 'btn' > Pròxim botó >





Al fragment de codi anterior, apliqueu les metodologies que s'indiquen a continuació:

  • Crea un encapçalament i inclou dos '
    ” elements per acumular la barra de progrés.
  • A més, inclou el '
      ” element que inclou les opcions per passar per la barra de progrés amb la primera activa.
    • Finalment, creeu dos botons per tornar enrere o anar al pas següent, respectivament.

    Codi CSS



    Ara, una visió general del següent bloc de codi CSS:

    < estil tipus = 'text/css' >
    #progrés, progressar {
    posició: relatiu;
    marge inferior: 30 píxels;
    }
    #progrés1 {
    posició: absoluta;
    fons: verd;
    alçada: 5px;
    amplada: 0 % ;
    superior: 50 % ;
    esquerra: 0 ;
    }
    #progrés2 {
    marge: 0 ;
    farciment: 0 ;
    estil de llista: cap;
    visualització: flexionar ;
    justificar-contingut: espai-entre;
    }
    #progress2::abans de {
    contingut: '' ;
    color de fons: gris clar;
    posició: absoluta;
    superior: 50 % ;
    esquerra: 0 ;
    alçada: 5px;
    amplada: 100 % ;
    índex z: -1 ;
    }
    #progress2 .pas {
    vora: 3px sòlid gris clar;
    radi de la frontera: 100 % ;
    amplada: 25 píxels;
    alçada: 25px;
    alçada de línia: 25px;
    alineació de text: centre;
    color de fons: #fff;
    família de tipus de lletra: sans-serif;
    mida de la lletra: 14px;
    posició: relatiu;
    índex z: 1 ;
    }
    #progress2 .pas.actiu {
    color de la vora: verd;
    color de fons: verd;
    color: #fff;
    }
    estil >

    En aquest codi:

    • Ajusteu la posició relativa de la barra de progrés i la posició absoluta dels elements secundaris subjacents.
    • A més, estileu la barra de progrés de manera que abans de canviar al pas següent, inclogui un color predeterminat i passi a un color diferent en passar al pas següent.
    • Això s'aconsegueix mitjançant l'estil, és a dir, ' color de fons ” etc. cadascun dels passos inactius i actius dins del cercle.

    Codi JavaScript

    Finalment, tingueu en compte el bloc de codi que s'ofereix a continuació:

    < guió tipus = 'text/javascript' >
    deixar xBar = document.getElementById ( 'progrés 1' ) ;
    deixar xNext = document.getElementById ( 'progrés següent' ) ;
    deixar xPrev = document.getElementById ( 'progrés enrere' ) ;
    deixar passos = document.querySelectorAll ( '.pas' ) ;
    deixar actiu = 1 ;
    xNext.addEventListener ( 'clic' , ( ) = < {
    actiu++;
    si ( actiu < passos.longitud ) {
    actiu = passos.longitud;
    }
    responsiveProgress ( ) ;
    } ) ;
    xPrev.addEventListener ( 'clic' , ( ) = < {
    actiu--;
    si ( actiu > 1 ) {
    actiu = 1 ;
    }
    responsiveProgress ( ) ;
    } ) ;
    const responsiveProgress = ( ) = < {
    passos.per a cadascú ( ( pas, i ) = < {
    si ( i > actiu ) {
    step.classList.add ( 'actiu' ) ;
    } altra cosa {
    step.classList.remove ( 'actiu' ) ;
    }
    } ) ;
    xBar.style.width =
    ( ( actiu - 1 ) / ( longitud de passos - 1 ) ) * 100 + '%' ;
    si ( actiu === 1 ) {
    xPrev.disabled = veritat ;
    } altra cosa si ( actiu === passos.longitud ) {
    xNext.disabled = veritat ;
    } altra cosa {
    xPrev.disabled = fals ;
    xNext.disabled = fals ;
    }
    } ;
    guió >

    En aquestes línies de codi:

    • En primer lloc, invoqueu la barra de progrés i els botons anterior i següent mitjançant el seu ' identificacions ' utilitzant el ' getElementById() ” mètode.
    • Després d'això, apliqueu el ' addEventListener() ” mètode de tal manera que quan es dispara “ feu clic ', els passos actius es recorren fins que s'acaben mitjançant el ' llargada ' propietat.
    • De la mateixa manera, retrocedeix pels passos.
    • A més, invoqueu el ' responsiveProgress() ” funció que recorre cada un dels passos i alterna la classe activa mitjançant la instrucció “if/else”.
    • Ara, assigneu l'amplada de la barra de progrés com a percentatge respecte als passos actius i totals/tots.
    • Finalment, desactiveu el botó corresponent si el pas actiu és el primer o l'últim.

    Nota: En aquest cas, tot el codi es troba al mateix fitxer HTML amb les etiquetes dedicades per a “ CSS ' i ' JavaScript ” codis. Tanmateix, també es poden enllaçar fitxers separats.

    Sortida

    Conclusió

    Una barra de progrés de pas sensible entra en vigor quan un formulari gran es divideix en diversos passos i es pot dissenyar mitjançant HTML, CSS i JavaScript. Aquesta barra de progrés també es pot personalitzar encara més segons els requisits, és a dir, afegir o eliminar passos, etc. En aquest escrit, hem treballat en el disseny de les barres responsives mitjançant HTML, CSS i JavaScript.