You can group items with a border in HTML using fieldset and you can also give that border a title using legend.

The title breaks the border briefly at the top.

Here’s an example which you can use to impress your friends, family, dogs, cats and potential parliamentary representatives.

<fieldset style="border: 1px dashed black">
  <legend>Ladies and gentlemen we are floating in space</legend>
  Sup
</fieldset>

First make the position of the div fixed. We’ll place it at the bottom of our screen by setting the bottom to 5px.

We make it so the div starts from the middle of the screen by setting the left property to 50%.

But this won’t make it exactly in the middle of the screen, of course, since this mean it starts from the middle of the screen, not that its centre point is in the middle of the screen.

To properly centre the div use the transform property to move the div half its width to the left.

  <div
    style="position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%);">
    I am centered. Rejoice.
  </div>

Take this CSS which will show a loading spinner similar to iPhone’s. It takes up the entire background, and has 0.5 transparency.

#cover {
  background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center rgba(255, 255, 255, 0.5);
  position: absolute;
  height: 100%;
  width: 100%;
}

Now place the html below your holding div <div v-show="loading" id="cover"></div>.

The v-show is vuejs saying only show it when the loading variable is true. But you can turn it on and off however you please.

Let’s turn it on and off – via this.loading=true/false – in our XMLHTTPREQUEST.

I have a very simple reactive observe, onNext and onError. But simply we turn it just before we send the request and turn it off when we receive something back.

observe: function(receiver) {
  var xhttp = new XMLHttpRequest()
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) receiver.onNext(xhttp.response)
    else if(this.readyState ==4 && this.status!=200) receiver.onError(xhttp.statusText)
  }
  xhttp.open("GET", "https://whatever", true)
  xhttp.send()
  this.loading = true
},
onNext: function(pagination) {
  this.loading = false
  ...
},
onError: function(message) {
  this.loading = false
  ...
}

We’ll create two divs. The first one will have a lot of content. The second will have little.

When you click on the second it will animate itself to take up most of the space.

Here is the basic layout:

<div class="main" style="height: 100%;">
  <div id="top" class="big" style="background-color: blue; overflow: hidden;">
    <div>I read</div>
    <div>the news</div>
    <div>today. </div>
    <div>Oh boy.</div>
    <div>A thou-</div>
    <div>-sand holes</div>
    <div>in Black-</div>
    <div>-burn Lan-</div>
    <div>-ca shire.</div>
  </div>
  <div id="bottomsheet" class="small" style="background-color: orange; overflow: hidden;">
    Bottom sheet
  </div>
</div>

The divs have overflow: hidden css attributes so we can resize their height regardless of their content.

Let’s now give our div a flexbox display, with the column direction. The big and small css classes will say that the first div will take up 80% and the second will take up 20%:

<style>
  .main {
    display: flex;
    flex-direction: column;
  }
  .small {
    flex-basis: 20%;
  }
  .big {
    flex-basis: 80%;
  }
</style>

We’ll now have a 80/20 height ratio between our two divs. Now let’s use the javascript (which you must put after your body’s content) to swap those dimensions via swapping the css big and small classes:

<script>
  document.querySelector("#bottomsheet").addEventListener("click", function() { 
    var small = document.querySelector(".small").classList;
    var big = document.querySelector(".big").classList;
    small.remove("small")
    small.add("big")
    big.remove("big")
    big.add("small")
  });
</script>

This all works wonderfully, but there’s no smooth animation. Let’s fix that by saying both the big and small css classes will involve a ease-in-out transition on the flex-basis attribute that will take 0.3 seconds:

.small, .big {
  transition-timing-function: ease-in-out;
  transition: flex-basis 0.3s;
}

And voila.

To transition from one css value to another, you can use the transition attribute.

In your element, set the value you want to transition, with the time taken to do such: transition: flex-basis 0.3s; for example.

And the change flex-basis value somehow to see the transition, usually by changing either class or style property of an element.

You can change the type of transition by setting the transition-timing-function attribute: to ease-in-out for example.