Paano Magdisenyo ng Mga Tumutugon na Progress Bar Gamit ang HTML, CSS at JavaScript

Sa snippet ng code sa itaas, ilapat ang mga ibinigay na pamamaraan sa ibaba:

• Lumikha ng isang heading at isama ang dalawang '
  ” mga elemento upang maipon ang progress bar.
• Gayundin, isama ang '
  ” elemento na binubuo ng mga opsyon na dumaan sa progress bar na ang una ay aktibo.
  • Panghuli, lumikha ng dalawang pindutan upang bumalik o mag-navigate sa susunod na hakbang, ayon sa pagkakabanggit.

  CSS Code

  
  
  

  Ngayon, isang pangkalahatang-ideya ng sumusunod na CSS code block:

  < istilo uri = 'text/css' >
  #progress {
  posisyon: kamag-anak;
  margin-bottom: 30px;
  }
  #progress1 {
  posisyon: ganap;
  background: berde;
  taas: 5px;
  lapad: 0 % ;
  itaas: limampu % ;
  kaliwa: 0 ;
  }
  #progress2 {
  margin: 0 ;
  padding: 0 ;
  list-style: wala;
  display: baluktot ;
  justify-content: space-between;
  }
  #progress2::before {
  nilalaman: '' ;
  kulay ng background: light grey;
  posisyon: ganap;
  itaas: limampu % ;
  kaliwa: 0 ;
  taas: 5px;
  lapad: 100 % ;
  z-index: -1 ;
  }
  #progress2 .step {
  hangganan: 3px solidong kulay abo;
  hangganan-radius: 100 % ;
  lapad: 25px;
  taas: 25px;
  taas ng linya: 25px;
  text-align: center;
  kulay ng background: #fff;
  font-family: sans-serif;
  laki ng font: 14px;
  posisyon: kamag-anak;
  z-index: 1 ;
  }
  #progress2 .step.active {
  kulay ng hangganan: berde;
  kulay ng background: berde;
  kulay: #fff;
  }
  istilo >

  Sa code na ito:

  • Isaayos ang relatibong posisyon ng progress bar at ang ganap na posisyon ng mga batayang elemento.
  • Gayundin, i-istilo ang progress bar na bago lumipat sa susunod na hakbang, binubuo ito ng default na kulay at mga transition sa ibang kulay kapag magpatuloy sa susunod na hakbang.
  • Ito ay nakakamit sa pamamagitan ng pag-istilo i.e., ' kulay ng background ” atbp. bawat isa sa mga hindi aktibo at aktibong hakbang sa loob ng bilog.

  JavaScript Code

  Panghuli, bigyang-pansin ang bloke ng code na ibinigay sa ibaba:

  < script uri = 'text/javascript' >
  hayaan xBar = document.getElementById ( 'pag-unlad1' ) ;
  hayaan xNext = document.getElementById ( 'susunod na pag-unlad' ) ;
  hayaan xPrev = document.getElementById ( 'pag-usad' ) ;
  hayaan hakbang = document.querySelectorAll ( '.hakbang' ) ;
  hayaan aktibo = 1 ;
  xNext.addEventListener ( 'click' , ( ) = < {
  aktibo++;
  kung ( aktibo < hakbang.haba ) {
  aktibo = hakbang.haba;
  }
  tumutugonProgreso ( ) ;
  } ) ;
  xPrev.addEventListener ( 'click' , ( ) = < {
  aktibo--;
  kung ( aktibo > 1 ) {
  aktibo = 1 ;
  }
  tumutugonProgreso ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  hakbang.para sa bawat ( ( hakbang, i ) = < {
  kung ( i > aktibo ) {
  step.classList.add ( 'aktibo' ) ;
  } iba pa {
  step.classList.alisin ( 'aktibo' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( aktibo - 1 ) / ( hakbang.haba - 1 ) ) * 100 + '%' ;
  kung ( aktibo === 1 ) {
  xPrev.disabled = totoo ;
  } iba pa kung ( aktibo === hakbang.haba ) {
  xNext.disabled = totoo ;
  } iba pa {
  xPrev.disabled = mali ;
  xNext.disabled = mali ;
  }
  } ;
  script >

  Sa mga linya ng code na ito:

  • Una sa lahat, tawagan ang progress bar, at ang nakaraan at susunod na mga pindutan sa pamamagitan ng kanilang ' mga id ' gamit ang ' getElementById() ” paraan.
  • Pagkatapos nito, ilapat ang ' addEventListener() 'paraan na kapag na-trigger' i-click ” kaganapan, ang mga aktibong hakbang ay binabagtas hanggang sa matapos ang mga hakbang sa pamamagitan ng “ haba ” ari-arian.
  • Gayundin, tumawid pabalik sa mga hakbang.
  • Gayundin, tawagan ang ' responsiveProgress() ” function na umiikot sa bawat isa sa mga hakbang at i-toggle ang aktibong klase sa pamamagitan ng pahayag na “if/else”.
  • Ngayon, italaga ang lapad ng progress bar bilang isang porsyento na may kinalaman sa aktibo at kabuuan/lahat ng mga hakbang.
  • Panghuli, huwag paganahin ang kaukulang pindutan kung ang aktibong hakbang ay ang una o huli.

  Tandaan: Sa kasong ito, ang buong code ay nakapaloob sa parehong HTML file na may mga nakalaang tag para sa ' CSS 'at' JavaScript ” mga code. Gayunpaman, maaari ding i-link ang mga hiwalay na file.

  Output

  

  Konklusyon

  Ang isang tumutugon na step progress bar ay magkakabisa kapag ang isang malaking form ay nahahati sa maraming hakbang at maaaring idisenyo gamit ang HTML, CSS, at JavaScript. Ang progress bar na ito ay maaari ding higit pang i-customize ayon sa mga kinakailangan i.e., pagdaragdag o pag-alis ng mga hakbang, atbp. Sa pagsulat na ito, kami ay nagpapaliwanag sa pagdidisenyo ng mga tumutugong bar gamit ang HTML, CSS, at JavaScript.