Html Css Js ile progress bar?

Merhabalar kutu yaptim ama icine nasil alttaki fotograftaki gibi progress bar yaparim bilmiyorum yardim edermisiniz
link; https://hizliresim.com/JstGYK
simdiden tesekkurler

<html>
<body>

  <style>
  .box {
    width: 145px;
    padding: 30px;
    border: 5px solid rgb(175,65,65);
    margin: 10px;
    border-radius: 20px;
    margin-left: 30px;
    background-color: rgb(173,47,58);
    color: white;
    text-align:center;
    word-wrap: break-word;

       }
.arrow{
  margin-top:15px;
  width: 7px;
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 35px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  border-spacing: inherit;
  margin: 10px;
  position: absolute;
  left: 80px;
  right: 10px;
}

       .left_box {
         width: 100px;
         height: 200px;
         margin: 10px;
         border-radius: 20px;
         float: left;
         margin-top: 80px;
         color:white;
         background-color: rgb(173,47,58);
         text-align: center;


            }

            .right_box {
              width: 100px;
              height: 200px;
              margin: 10px;
              border-radius: 20px;
              float: left;
              margin-top: 80px;
              color:white;
              background-color: rgb(173,47,58);
              text-align:center;



                 }

  </style>

  <div class="box">.....</div>
  <div class="arrow"></div>
  <div class="left_box">Sub goal</div>
  <div class="right_box">...</div>






</body>
</html>

Html Css Js ile progress bar?

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (1)