uikit/src/less/components/progress.less

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

// Name:            Progress
// Description:     Component to create progress bars
//
// Component:       `uk-progress`
//
// ========================================================================


// Variables
// ========================================================================

@progress-height:                               15px;
@progress-margin-vertical:                      @global-margin;
@progress-background:                           @global-muted-background;

@progress-bar-background:                       @global-primary-background;


/* ========================================================================
   Component: Progress
 ========================================================================== */

/*
 * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 * 2. Remove default style
 * 3. Behave like a block element
 * 4. Remove borders in Firefox and Edge
 * 5. Set background color for progress container in Firefox, IE11 and Edge
 * 6. Style
 */

.uk-progress {
    /* 1 */
    vertical-align: baseline;
    /* 2 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 3 */
    display: block;
    width: 100%;
    /* 4 */
    border: 0;
    /* 5 */
    background-color: @progress-background;
    /* 6 */
    margin-bottom: @progress-margin-vertical;
    height: @progress-height;
    .hook-progress;
}

/* Add margin if adjacent element */
* + .uk-progress { margin-top: @progress-margin-vertical; }

/*
 * Remove animated circles for indeterminate state in IE11 and Edge
 */

.uk-progress:indeterminate { color: transparent; }

/*
 * Progress container
 * 2. Remove progress bar for indeterminate state in Firefox
 */

.uk-progress::-webkit-progress-bar {
  background-color: @progress-background;
  .hook-progress;
}

/* 2 */
.uk-progress:indeterminate::-moz-progress-bar { width: 0; }

/*
 * Progress bar
 * 1. Remove right border in IE11 and Edge
 */

.uk-progress::-webkit-progress-value {
    background-color: @progress-bar-background;
    transition: width 0.6s ease;
    .hook-progress-bar;
}

.uk-progress::-moz-progress-bar {
    background-color: @progress-bar-background;
    .hook-progress-bar;
}

.uk-progress::-ms-fill {
    background-color: @progress-bar-background;
    transition: width 0.6s ease;
    /* 1 */
    border: 0;
    .hook-progress-bar;
}


// Hooks
// ========================================================================

.hook-progress-misc;

.hook-progress() {}
.hook-progress-bar() {}
.hook-progress-misc() {}