292 lines
17 KiB
HTML
292 lines
17 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html class="no-js">
|
|||
|
|
<head><meta charset="utf-8"/>
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|||
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|||
|
|
<link rel="index" title="Index" href="../../genindex.html" /><link rel="search" title="Search" href="../../search.html" /><link rel="next" title="Dialogs" href="dialogs.html" /><link rel="prev" title="Progress Bars" href="progress-bars.html" />
|
|||
|
|
|
|||
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|||
|
|
<title>Spinners - GNOME Human Interface Guidelines documentation</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--color-code-background: #f8f8f8;
|
|||
|
|
--color-code-foreground: black;
|
|||
|
|
--color-brand-primary: #4a86cf;
|
|||
|
|
--color-brand-content: #4a86cf;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
:root {
|
|||
|
|
--color-code-background: #202020;
|
|||
|
|
--color-code-foreground: #d0d0d0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* For allowing end-user-specific overrides */
|
|||
|
|
.override-light {
|
|||
|
|
--color-code-background: #f8f8f8;
|
|||
|
|
--color-code-foreground: black;
|
|||
|
|
--color-brand-primary: #4a86cf;
|
|||
|
|
--color-brand-content: #4a86cf;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.override-dark {
|
|||
|
|
--color-code-background: #202020;
|
|||
|
|
--color-code-foreground: #d0d0d0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
|
|||
|
|
<body dir="">
|
|||
|
|
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|||
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|||
|
|
<title>Contents</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|||
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|||
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|||
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|||
|
|
<title>Menu</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|||
|
|
class="feather feather-menu">
|
|||
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|||
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|||
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|||
|
|
<title>Expand</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|||
|
|
class="feather feather-chevron-right">
|
|||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|||
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|||
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|||
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="page">
|
|||
|
|
<header class="mobile-header">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|||
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-center">
|
|||
|
|
<a href="../../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-right">
|
|||
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|||
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<aside class="sidebar-drawer">
|
|||
|
|
<div class="sidebar-container">
|
|||
|
|
|
|||
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../../index.html">
|
|||
|
|
|
|||
|
|
<div class="sidebar-logo-container">
|
|||
|
|
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|||
|
|
|
|||
|
|
</a><form class="sidebar-search-container" method="get" action="../../search.html">
|
|||
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|||
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|||
|
|
<input type="hidden" name="area" value="default">
|
|||
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|||
|
|
<ul class="current">
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools & Resources</a></li>
|
|||
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../containers.html">Containers</a><input class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/windows.html">Windows</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/header-bars.html">Header Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/popovers.html">Popovers</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/utility-panes.html">Utility Panes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/boxed-lists.html">Boxed Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/grid-views.html">Grid Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/list-column-views.html">List & Column Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../containers/selection-mode.html">Selection & Edit Modes</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/overlaid.html">Overlaid Controls</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 current has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="notifications.html">Notifications</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="toasts.html">Toasts</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="info-bars.html">Info Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="progress-bars.html">Progress Bars</a></li>
|
|||
|
|
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Spinners</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="dialogs.html">Dialogs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="placeholders.html">Placeholder Pages</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="tooltips.html">Tooltips</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
<main class="main">
|
|||
|
|
<div class="content">
|
|||
|
|
<article role="main">
|
|||
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|||
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
<section id="spinners">
|
|||
|
|
<h1>Spinners<a class="headerlink" href="#spinners" title="Permalink to this headline">¶</a></h1>
|
|||
|
|
<img alt="../../_images/spinner.png" class="light" src="../../_images/spinner.png"/>
|
|||
|
|
<img alt="../../_images/spinner-dark.png" class="dark" src="../../_images/spinner-dark.png"/>
|
|||
|
|
<p>Spinners indicate ongoing progress on an action or operation.</p>
|
|||
|
|
<section id="when-to-use">
|
|||
|
|
<h2>When to Use<a class="headerlink" href="#when-to-use" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>Progress needs to be indicated whenever an operation takes more than around three seconds. This communicates that the operation is taking place and that an error hasn’t occurred. If an operation takes less than three seconds, it isn’t necessary to indicate progress.</p>
|
|||
|
|
<p>Spinners do not display the proportion of the task that has been completed, or the time remaining. They are therefore better-suited to shorter operations. If the task is likely to take more than 30 seconds, a <a class="reference internal" href="progress-bars.html"><span class="doc">progress bar</span></a> might be a better choice.</p>
|
|||
|
|
</section>
|
|||
|
|
<section id="general-guidelines">
|
|||
|
|
<h2>General Guidelines<a class="headerlink" href="#general-guidelines" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p>It is better not to show spinners for very short periods of time, since briefly displayed animated elements distract from the overall user experience. If an operation can vary in how long it takes, consider only showing the spinner after a period of time has elapsed.</p></li>
|
|||
|
|
<li><p>Place progress spinners close to or within the user interface elements they relate to.</p></li>
|
|||
|
|
<li><p>Generally, only one progress spinner should be displayed at once. Avoid showing numerous spinners simultaneously.</p></li>
|
|||
|
|
<li><p>A label can be shown next to a spinner, if it is helpful to clarify the task which a spinner relates to.</p></li>
|
|||
|
|
<li><p>If a spinner is displayed for a relatively long time, a label can be added to indicate progress. This can take the form of a percentage, an indication of the time remaining, or progress through sub-components of the task (for example, items downloaded or pages exported).</p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
<section id="api-reference">
|
|||
|
|
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk4/class.Spinner.html">GTK 4: GtkSpinner</a></p></li>
|
|||
|
|
<li><p><a class="reference external" href="https://docs.gtk.org/gtk3/class.Spinner.html">GTK 3: GtkSpinner</a></p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</article>
|
|||
|
|
<footer>
|
|||
|
|
|
|||
|
|
<div class="related-pages">
|
|||
|
|
<a class="next-page" href="dialogs.html">
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Next</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="title">Dialogs</div>
|
|||
|
|
</div>
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
</a>
|
|||
|
|
<a class="prev-page" href="progress-bars.html">
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Previous</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="title">Progress Bars</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
<aside class="toc-drawer">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="toc-sticky toc-scroll">
|
|||
|
|
<div class="toc-title-container">
|
|||
|
|
<span class="toc-title">
|
|||
|
|
Contents
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="toc-tree-container">
|
|||
|
|
<div class="toc-tree">
|
|||
|
|
<ul>
|
|||
|
|
<li><a class="reference internal" href="#">Spinners</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#when-to-use">When to Use</a></li>
|
|||
|
|
<li><a class="reference internal" href="#general-guidelines">General Guidelines</a></li>
|
|||
|
|
<li><a class="reference internal" href="#api-reference">API Reference</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
</main>
|
|||
|
|
</div><script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
|
|||
|
|
<script src="../../_static/jquery.js"></script>
|
|||
|
|
<script src="../../_static/underscore.js"></script>
|
|||
|
|
<script src="../../_static/doctools.js"></script>
|
|||
|
|
<script src="../../_static/scripts/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|