Shiriti rrethor i progresit duke përdorur HTML dhe CSS

Përshëndetje Coder, Mirë se vini në blogun Codewithrandom. Sot ne do të krijojmë Rircular Progress Bar duke përdorur HTML dhe CSS. Ecuria e një procesi në një aplikacion tregohet nëpërmjet një shiriti progresi. Shuma e procesit që ka përfunduar dhe shuma që duhet bërë ende tregohen nga një shirit progresi. Ne do të dizajnojmë pjesë të ndryshme të shiritit të progresit duke përdorur HTML dhe mund ta personalizojmë shiritin e progresit duke përdorur atributet CSS.

Ky tutorial do t'ju ndihmojë nëse dëshironi të përdorni HTML dhe CSS për të krijuar një shirit të përparimit rrethor. Këtu, unë do të demonstroj se si të krijoj një rreth të drejtpërdrejtë CSS Shiriti Progres.

Ky animacion do të ndryshojë nga 0 në kuptimin që ju është dhënë kur ngarkoni faqen. Edhe pse një pjesë e tekstit është e animuar, ky tekst nuk është i animuar. Është ndërtuar mjaft thjesht.

Ky tutorial do t'ju përcjellë në çdo hap që kam bërë për të krijuar shiritin rrethor të përparimit. Ju duhet të jeni të njohur me konceptet bazë HTML dhe CSS për ta krijuar atë.

Hapi 1: Shtimi i strukturës bazë me stilimin.

Për të filluar, ne duhet të përfshijmë një enë për shiritin tonë rrethor të përparimit. Ne do të përdorim idenë themelore HTML për të. Kontejneri për shiritin tonë rrethor të përparimit do të bëhet duke përdorur etiketën div.

<div class="container">
        
    </div>

Shiriti ynë rrethor i përparimit tani ka një enë. tani do të përdorim konceptet CSS për të shtuar stil në kontejnerin tonë.

Ne do të shtojmë disa stile në faqen tonë të internetit duke përdorur përzgjedhësin universal. Ne do të përfshijmë një madhësi kutie si "kufi-kufi" duke përdorur veçorinë e madhësisë së kutisë. Mbushja dhe diferenca të dyja kanë një vlerë "0".

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color:lightblue;
  height: 100vh;
  align-items: center;
  
}

Duke përdorur përzgjedhësin e klasës (.container). Ekrani është vendosur në "flex" dhe ne kemi vendosur hapësirën rreth çdo shiriti të përparimit duke përdorur atributin justify-content. Ne do t'i japim projektit tonë një ngjyrë të sfondit blu të lehtë duke përdorur atributin e ngjyrës së sfondit.

Hapi 2: Shtimi i rrethit.

Për të ndërtuar shiritin e përparimit rrethor, ne kemi përdorur HTML dhe CSS. Një div i ri me klasën (progres) do të krijohet brenda kontejnerit tonë. Projekti ynë do të marrë një rreth duke përdorur përzgjedhësin e klasës në CSS tonë.

<div class="container">
        <div class="progress">
        </div>
    </div>
.progress {
  width: 200px;
  height: 200px;
  font-size: 30px;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #07070c;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  box-shadow: 2px 2px 2px 2px white;
}
.progress::after {
  content: "";
}

Përdoret përzgjedhësi i klasës (.përparim). Dimensionet janë 200 px si për gjerësinë ashtu edhe për lartësinë. Atributi font-size do të përdoret për të vendosur madhësinë e shkronjave në 30px. Ne do të përfitojmë nga veçoria e rrezes kufitare për të dhënë pamjen rrethore. Për të krijuar pamjen e një rrethi, ne do ta vendosim rrezen e kufirit të tij në 50%. Rrethi që po përdorim tani ka një sfond të zi. Për t'i dhënë rrethit tonë një pamje 3D, ne kemi përfshirë edhe një hije kuti.

Hapi 2: Shtimi i hyrjes në rreth.

Tani, duke përdorur etiketën span, ne do të shtojmë një hyrje numerike në rrethin tonë dhe do të rregullojmë diapazonin e vlerës nga 0 në 85. Për të shtuar lëvizjen e progresit në shiritin tonë rrethor të përparimit, do të bëjmë 3 div nga brenda ndarjes sonë të progresit. Së pari do të krijohet një div me një klasë (mbivendosje).

<div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

Tani do të shtojmë një gjerësi 50% dhe lartësi 100% duke përdorur mbivendosjen. Pozicioni ka gjithashtu një mjedis "absolut". Gjysma e shiritit tonë të përparimit të rrethit është stiluar vetëm nga mbivendosja. Duke përdorur veçorinë e ngjyrës së sfondit, ne shtuam një sfond të zi në mbivendosjen tonë.

.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #07070c;
}

Hapi 2: Shtimi i shiritit të përparimit të animacionit në rreth.

Div që kemi specifikuar në etiketën tonë të kontejnerit do të përdoret për të shtuar progresin. Janë bërë dy ndarje dhe janë dhënë klasat "majtas" dhe "djathtas". Ne do t'i përdorim ato për t'i dhënë rrethit tonë një shirit përparimi.

<div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

Tani do të shtohet një shirit progresi duke përdorur dy klasa të veçanta (.majtas &.djathtas). Lartësia është vendosur në 100%, dhe gjerësia është vendosur në 50%. Ne do të shtojmë kufij të ngurtë, me gjerësi 10 px duke përdorur atributin e kufirit. Ne do të përdorim rrezen e kufirit për të shtuar një rreze kufiri prej 100 px në këndin e sipërm dhe të djathtë të elementit tonë.

Tani për të shtuar animacionin në projektin tonë, ne kemi përdorur konceptet e thjeshta të CSS duke përdorur vetinë e animacionit. Një element mund të kalojë në mënyrë progresive nga një stil në tjetrin përmes animacionit. Ju jeni të lirë të bëni sa më shumë ndryshime në CSS sa të doni, kurdo që dëshironi. Së pari duhet të përcaktoni kornizat kryesore të animacionit përpara se të përdorni animacionin CSS. Stilet që elementet do të kenë në momente specifike ruhen në korniza kyçe.

Këtu kemi përdorur animacionin si ngarkesë për 0,5 sek dhe më pas duke përdorur vijën lineare përpara do të shtojmë një animacion tjetër.

Tani do të përdorim kornizat kryesore dhe do të shtojmë stile të ndryshme në intervale të ndryshme kohore duke përdorur vetëm kornizat kryesore.

Shiriti i progresit do të përshtatet në përputhje me vlerën ndërsa shtojmë tre shirita rrethor progresi shtesë, secili me një vlerë të ndryshme. Provoni të shtoni më shumë shirita rrethorë nëse mund të krijoni një shirit të vetëm përparimi për të shkuar me të. Si rezultat, do të jeni në gjendje t'i kuptoni gjërat më mirë.

Tani le të hedhim një vështrim në pamjen paraprake të videos së projektit tonë.

Dalja përfundimtare e shiritit të përparimit rrethor:

Plotësoni shiritin e përparimit rrethor të kodit:

HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>Cicrular Progress Bar </title>
</head>
<body>
    <div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="progress">
            <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="progress">
            <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color:lightblue;
  height: 100vh;
  align-items: center;
  
}
.progress {
  width: 200px;
  height: 200px;
  font-size: 30px;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #07070c;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  box-shadow: 2px 2px 2px 2px white;
}
.progress::after {
  content: "%";
}
.progress .title {
  position: relative;
  z-index: 100;
}
.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #07070c;
}
.progress .left,
.progress .right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 10px solid gray;
  border-radius: 100px 0px 0px 100px;
  border-right: 0;
  transform-origin: right;
}
.progress .left {
  animation: load1 1s linear forwards;
}
.progress:nth-of-type(2) .right,
.progress:nth-of-type(3) .right {
  animation: load2 0.5s linear forwards 1s;
}
.progress:last-of-type .right,
.progress:first-of-type .right {
  animation: load3 0.8s linear forwards 1s;
}
@keyframes load1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes load2 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }
  100% {
    z-index: 100;
    transform: rotate(270deg);
  }
}
@keyframes load3 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }
  100% {
    z-index: 100;
    transform: rotate(315deg);
  }
}

Tani ne kemi krijuar me sukses Shiritin rrethor të progresit duke përdorur HTML & CSS. Ju mund ta përdorni këtë projekt drejtpërdrejt duke e kopjuar në IDE-në tuaj. Shpresojmë që e keni kuptuar projektin, nëse keni ndonjë dyshim mos ngurroni të komentoni!!

Nëse e gjeni të dobishëm këtë Blog, atëherë sigurohuni që të kërkoni kodin në mënyrë të rastësishme në google për Projektet e Përparme me kode burimore dhe sigurohuni që të ndiqni faqen "Kodi me rastësi" në Instagram.

ndiqni: kodin me rastësi

Shkruar nga : arun

Kodi nga : Arun

Cilin redaktues kodi përdorni për këtë shirit të përparimit rrethor?

Unë rekomandoj përdorimin e VS Code Studio, është i drejtpërdrejtë dhe i lehtë për t'u përdorur.

A është ky projekt i përgjegjshëm apo jo?

Po! ky shirit i progresit rrethor është i përgjegjshëm.

A përdorni ndonjë lidhje të jashtme për të krijuar këtë projekt?

Jo, ne krijojmë shiritin e përparimit rrethor duke përdorur Html dhe Css të pastër.