1

Progress Bars

Angelos Chalaris edited this page 2016-09-08 12:43:38 +03:00

Table of Contents

• Making a progress bar wrapper and base style
• Definition
• Parameters
• Adding custom styles
• Definition
• Parameters
• Remarks

The progress bar styles allow you to easily create and customize lightweight progress bars on the fly. In the _progress.scss file, you can find two mixins that can be used to create your own progress bars and style them the way you want.

Making a progress bar wrapper and base style

To make a new wrapper for progress bars as well as a base style for them, use the make-progress mixin.

Definition

make-progress(
	$progress-name, 
	$progress-height, 
	$progress-border-radius, 
	$progress-bg-color,
	$progress-font-size, 
	$progress-bar-color, 
	$progress-bar-bg-color)

Parameters

• $progress-name : The class name of the progress wrapper.
• $progress-height : The height of the progress wrapper.
• $progress-border-radius : The border radius of the progress wrapper.
• $progress-bg-color : The background color of the progress wrapper. [1]
• $progress-font-size : The font size of the progress bar's text (if any).
• $progress-bar-color : The progress bar's text color.
• $progress-bar-bg-color : The progress bar's background color.

Notes:

• [1] : The background color of the progress wrapper should be a different color than the page's background to make sure that it is visible.
• [2] : This only creates a basic progress style. For more progress bar styles use make-progress-bar-variant.

Adding custom styles

To add a new custom style class, use the make-progress-bar-variant mixin.

Definition

make-progress-bar-variant(
	$progress-name, 
	$progress-bar-variant-name, 
	$progress-bar-variant-color, 
	$progress-bar-variant-bg-color)

Parameters

• $progress-name : The class name of the progress wrapper. [1]
• $progress-bar-variant-name : The class name of the progress bar variant.
• $progress-bar-variant-color : The progress bar variant's text color.
• $progress-bar-variant-bg-coor : The progress bar variant's background color.

Notes:

• [1] : The name of $progress-name should match the one specified in make-progress for the progress bar variant to work correctly.
• [2] : This mixin should be used in combination with make-progress and is suggested that you use it after make-progress.

Remarks

• After creting a base progress style with make-progress, multiple styles can be defined using the other mixin.
• Please exercise caution when naming style classes, especially if the names are the names of web-safe colors. For example if you want to create the .progress.red class, pass the name red in quotation marks like 'red' to avoid automatic conversion.
• There is no mixin that allows users to alter the size of their progress bars. If such a functionality is needed, you can add a custom class that affects the height of the wrapper as well as the font-size of the progress bars.

• Home
• Flavors
• Documentation
  • Base
  • Buttons
  • Forms
  • Grid
  • Navigation
  • Tables
  • Utilities & Helper Classes
  • [Labels & Badges](https://github.com/Chalarangelo/mini.css/wiki/Labels and Badges)
  • Tabs
  • Modals
  • Navigation > Dropdown
  • Collapse
  • Progress Bars
  • Spinners
  • Carousel
  • Utilities & Experimental Classes

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.