Question 45768 in CSS Question posted in
Some basic documentation can be found here.

Component should cover the entire parent element – CSS

I try to create a progress bar component in angular, everything is working except covering the parent element.

See the working code here:

See the code: Angular code: what I have now

CSS:

:host {
  box-sizing: border-box;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
}

:host> .loader {
  border: 3px solid rgba(126, 132, 138, 0.1);
  border-radius: 50%;
  border-top: 3px solid red;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
  text-align: center;
  display: inline-block;
  z-index: 1010;
  opacity: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Simple HTML:

<div class="loader"  *ngIf="isLoading"></div>

enter image description here

Tags:

2

Answers


  1. 0

    You need a bit of CSS:

    <h3>
  Want this progress bar to cover the parent div area <br />
  that mens dotted area(page-section)
</h3>
<div id="page-section">
  <div class="example-loading">
    <app-loader></app-loader>
  </div>

  <h4>Form Controls</h4>
  ...
</div>


    .example-loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 40px;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

    StackBlitz here

    Login or Signup to reply.
  2. 0

    A simple way to go is changing the parent css behaviour, instead of the loading component.

    Change your .page-section class like that in app.component.css

    #page-section {
  border: 3px dotted #bbb;
  position: relative;
}

    Then wrap the loader component in a tag with the following style

    .loader-container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

    This essentially makes the container take the whole space available and vertically and horizontally center its content.

    Here is your code updated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search