275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161121 -->
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/7c12706dbe05ce5410f0f44dc0af75449fc6a6bc/dist/mini-default.min.css">
|
|
<!-- Local stylesheet -->
|
|
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Progress</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, progress">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
/* Classes and ids used in multiple pages - page top and utilities */
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
|
margin-left: -3px; padding: 2px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-heading {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #b71c1c; }
|
|
.box-centered > .card.fluid {
|
|
-webkit-box-pack: start;
|
|
-webkit-box-align: start;
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-webkit-align-self: auto;
|
|
align-self: auto;
|
|
}
|
|
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
/* Local classes and ids for this page */
|
|
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
|
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
|
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #bdbdbd;
|
|
}
|
|
@media (max-width: 800px){
|
|
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
|
border: 0;
|
|
border-top: 1px solid #bdbdbd;
|
|
}
|
|
}
|
|
.box-colored.green { background: #1b5e20; }
|
|
.do {
|
|
border-top: 15px solid #558b2f;
|
|
padding-top: 10px;
|
|
}
|
|
.dont {
|
|
border-top: 15px solid #f44336;
|
|
padding-top: 10px;
|
|
}
|
|
.box-colored {
|
|
color: #f5f5f5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
|
<a href="index.html" class="button">Introduction</a>
|
|
<a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a>
|
|
<a href="customization.html" class="button">Customization</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="box-centered">
|
|
<img src="mini-logo.svg" id="top-logo">
|
|
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<h1>Progress</h1>
|
|
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
|
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
|
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Grid</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The <strong>progress</strong> module provides you with two essential tools to communicate this information: the <code><progress></code> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the <code>.spinner-donut</code> class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p>To use the <strong>progress</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Basic Progress Bar</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Progress Bar variants</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Basic Donut Spinner</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Donut Spinner variants</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<!-- sample -->
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p></p>
|
|
<h3>Sample code</h3>
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><!-- do code --></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><!-- don't code --></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html> |