Search code examples
htmlcssdialogprogress-barloading

How can i achieve this design with CSS?

I'm a newbie in CSS and a new user of stack overflow. I want to design a message-box (speech-bubble), as in the [Design I was given] (https://i.sstatic.net/moRgV.jpg):

So I copied a code from the internet that draw something similar, here is the resulting output of my code:

This is my code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  position: relative;
  background-image: url('images/bg-mobile.png');
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Raleway', sans-serif;
}

.container {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-40%, -40%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fylo {
  display: flex;
  flex-direction: column;
  gap: 1.7em;
  width: 320px;
  background: hsl(228, 56%, 26%);
  padding: 2em 3.6em 2.6em 2em;
  margin: 0.5em;
  border-radius: 0.7em;
  border-top-right-radius: 7em;
}

.fylo .second-layer {
  display: flex;
  flex-direction: row;
  gap: 0.9em;
}

.second-layer div {
  width: 30px;
  height: 30px;
  padding: 1.36em;
  background-color: hsl(229, 57%, 11%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.flex-container {
  width: 320px;
  background: hsl(228, 56%, 26%);
  padding: 2em 1.5em 3em;
  border-radius: 0.7em;
  display: flex;
  flex-direction: column;
  color: hsl(0, 0%, 100%, .7)
}

.flex-container p {
  margin-bottom: 0.1em;
  text-align: center
}

.inner-flex {
  display: flex;
  margin-top: 0.65em;
  font-size: 0.77rem;
  font-weight: 600;
}

.inner-flex span:nth-child(2) {
  margin-left: auto;
}

progress {
  -webkit-appearance: none;
  -moz-appeareance: none;
  appearance: none;
  width: 100%;
  margin-top: 1em;
}


/*For webkit browsers like chrome I have to include the following  pseudoelements.The third one is not useful here*/


/*The indicator*/

::-webkit-progress-value {
  background: linear-gradient(hsl(6, 100%, 80%), hsl(335, 100%, 65%));
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

::-webkit-progress-value::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: yellow;
  border-radius: 50%;
  top: 50px;
  right: 20px;
  transform: translateX(50%, -50%);
  z-index: -1;
}


/*The Bar*/

::-webkit-progress-bar {
  background: hsla(229, 57%, 11%, 0.5);
  border-radius: 20px;
  height: 17px;
  border: 2px solid hsla(229, 57%, 11%, 0.5);
}


/*for moz browsers like Firefox,I have to  use the only existing pseudoelement(one) for appearance property for it and style it the sam as i styled ::-webkit-progress-value,I could have used comma to separate the selectors but we are dealing with experimental properties and we have non-stadard behaviour */

::-moz-progress-bar {
  background: linear-gradient(hsl(6, 100%, 80%), hsl(335, 100%, 65%));
  border-radius: 20px;
}


/*End of experimental declarations*/

.left-storage {
  width: 175px;
  height: 75px;
  background: hsl(0, 0%, 100%);
  border-radius: 0.6em;
  margin-top: -2.35em;
}

.left-storage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.left-storage>span:nth-child(1) {
  font-weight: 700;
  font-size: 2.5rem;
  opacity: 0.9;
}

.left-storage>span:nth-child(2) {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
  color: hsla(229, 7%, 55%, .8);
}

@media (min-width: 955px) {
  .container {
    flex-direction: row;
  }
  .flex-container {
    margin-top: calc(188.333px - 125.6px);
    margin-left: 0.5em;
    width: 400px;
    padding: 1.5em;
  }
  .left-storage {
    width: 120px;
    height: 80px;
    background: hsl(0, 0%, 100%);
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  .left-storage::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid white;
    border-bottom: 13px solid transparent;
  }
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
<!--End of google fonts-->

<main class="container">
  <div class="fylo">
    <div class="top-layer">
      <image src="images/logo.svg" alt="fylo logo" />
    </div>
    <div class="second-layer">
      <div>
        <image src="images/icon-document.svg">
      </div>
      <div>
        <image src="images/icon-folder.svg">
      </div>
      <div>
        <image src="images/icon-upload.svg">
      </div>
    </div>
  </div>
  <div class="flex-container">
    <p>You've used <span>815GB</span> of your storage</p>
    <progress value="70" max="100"></progress>
    <div class="inner-flex">
      <span>0 GB</span>
      <span>1000 GB</span>
    </div>
  </div>
  <div class="left-storage"><span>185</span><span>GB left</span></div>
</main>

What I want to achieve is that the tail of the message-box (i.e .left-storage in the css) to be positioned as it is in the design. I want to understand how to do this.

I also want know how to make the small white circle appear at the end of progress-value (that loading thing) with css.

Solution

  • I have solved the problem, please use the below CSS code:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    position: relative;
    background-image: url('images/bg-mobile.png');
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Raleway', sans-serif;
}

.container {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-40%,-40%);
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fylo {
    
    display: flex;
    flex-direction: column;
    gap: 1.7em;
    width: 320px;
    background:  hsl(228, 56%, 26%);
    padding: 2em 3.6em 2.6em 2em;
    margin: 0.5em;
    border-radius: 0.7em;
    border-top-right-radius: 7em;
}

.fylo .second-layer{
    display: flex;
    flex-direction: row;
    gap: 0.9em;
}

.second-layer  div {
    width: 30px;
    height: 30px;
    padding: 1.36em;
    background-color:  hsl(229, 57%, 11%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.flex-container {
    width: 320px; 
    background: hsl(228, 56%, 26%);  
    padding: 2em 1.5em 3em;
    border-radius: 0.7em;
    display: flex;
    flex-direction: column;
    color:hsl(0,0%, 100%,.7)
}
.flex-container p {
    margin-bottom: 0.1em;
    text-align: center
}
.inner-flex {
    display: flex;
    margin-top: 0.65em;
    font-size: 0.77rem;
    font-weight: 600;
}
.inner-flex span:nth-child(2) {
    margin-left: auto;
}
progress {
    -webkit-appearance: none;
    -moz-appeareance: none;
    appearance: none;
    width: 100%;
    margin-top: 1em;
}

/*For webkit browsers like chrome I have to include the following  pseudoelements.The third one is not useful here*/

/*The indicator*/
::-webkit-progress-value  {
    background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%));
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
::-webkit-progress-value::after  {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: yellow;
    border-radius: 50%;
    top: 50px;
    right: 20px;
    transform: translateX(50%, -50%);
    z-index: -1;
}
/*The Bar*/
::-webkit-progress-bar {
    background: hsla(229, 57%, 11%,0.5);
    border-radius: 20px;
    height: 17px;
    border: 2px solid hsla(229, 57%, 11%,0.5);
}

/*for moz browsers like Firefox,I have to  use the only existing pseudoelement(one) for appearance property for it and style it the sam as i styled ::-webkit-progress-value,I could have used comma to separate the selectors but we are dealing with experimental properties and we have non-stadard behaviour */

::-moz-progress-bar { 
    background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%));
    border-radius: 20px;
}
/*End of experimental declarations*/


.left-storage {
    width: auto;
    height: 72px;
    background: hsl(0,0%, 100%);
    border-radius: 0.6em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.left-storage > span:nth-child(1) {
    font-weight: 700;
    font-size: 2.5rem;
    opacity: 0.9;
} 
.left-storage > span:nth-child(2) { 
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    color: hsla(229, 7%, 55%, .8);
    white-space: nowrap;
}

@media (min-width: 955px) {
    .container {
        flex-direction: row;
    }
    .flex-container {
        margin-top: calc(188.333px - 125.6px);  
        margin-left: 0.5em;
        width: 400px;
        padding: 1.5em;
    }
    .left-storage {
        width: auto;
        height: 72px;
        background: hsl(0,0%, 100%);
        position: absolute;
        border-radius: 10px;
        top: 0;
        right: 20px;
        padding: 0 25px;
      }
      .left-storage::before {
        content: "";
        position: absolute;
        right: 0;
        top: 58px;
        width: 0;
        height: 0;
        border-top: 0 solid transparent;
        border-right: 35px solid white;
        border-bottom: 36px solid transparent;
      }
    
}