Progress bar tight against other content

Question

Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.

Issue: FUI provides both a capable modal component and a useful progress bar component. The requirement is how to have a progress bar appear in a modal tightly connected to the bottom of the modal header segment. As per my gif below. In this use case the user is searching for something on a server with an async process happening and I need to show the user some indication of action elsewhere.

Using the standard progress bar CSS meant that the progress bar is not connected to the header.

$('#b1').on('click', function(e) {

  $('#m1').modal('show')

  $('#m1').find('.theProgress-bar').show();

  setTimeout(function() {
    $('#m1').find('.theProgress-bar').css({
      visibility: 'hidden'
    });
  }, 5000)

})

<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>
    <div class="ui tiny blue indeterminate progress">
      <div class="bar">
        <div class="progress"></div>
      </div>
    </div>
    <div class="content">
      <p>Note the progress bar is NOT tight against the line that separates the header from the content.</p>
      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>

score 0 · Answer 1 · answered Jan 21 '20 at 00:04

The answer was to create a 2 new CSS classes, based on the supplier FUI classes, but using a mush smaller bar size.

$('#b1').on('click', function(e) {

  $('#m1').modal('show')

  $('#m1').find('.theProgress-bar').show();

  setTimeout(function() {
    $('#m1').find('.theProgress-bar').css({
      visibility: 'hidden'
    });
  }, 5000)

})

.theProgress-bar {
  display: none;
  height: .15rem;
  background-color: rgba(5, 114, 206, 0.2);
  width: 100%;
  overflow: hidden;
}

.theProgress-bar-indeterminate-value {
  width: 100%;
  height: 100%;
  background-color: rgb(5, 114, 206);
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>

<body>
  <p>Click the 'show modal' button to open a modal.
  </p>

  <p>
    <button id='b1'>Show the modal</button>
  </p>

  <div id='m1' class="ui modal">
    <div class="header">Header</div>
    <div class="theProgress-bar">
      <div class="theProgress-bar-indeterminate-value">
        <div class="progress">Pulsating (default)</div>
      </div>
    </div>
    <div class="content">
      <p>Note the progress bar is tight against the line that separates the header from the content.</p>
      <p>
        Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
        incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
        voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>

    </div>
    <div class="actions">
      <div class="ui approve button">Approve</div>
      <div class="ui button">Neutral</div>
      <div class="ui cancel button">Cancel</div>
    </div>
  </div>

Progress bar tight against other content

1 Answers1