Trobber

What is a throbber?

A throbber (from English throbber — pulsation, heartbeat) is an animated graphic element that serves as an indicator of background actions, such as loading content, executing tasks, or performing commands. This element can be used on websites, in applications, or computer programs. A classic example of a throbber is the spinning circle that appears in the browser in place of the favicon while a new webpage is loading. Such indicators are almost always present on browser tabs.

Characteristics of a throbber

A throbber, also known as an asynchronous progress indicator, is a type of preloader. Unlike a progress indicator (progress bar), which shows the percentage of completion or remaining time, a throbber merely demonstrates that the loading process is ongoing. It often has pulsating outlines, creating a visual effect that indicates the process is not complete. Therefore, a throbber is sometimes referred to as a pulsator.

Why do we need a throbber?

The first use of a throbber occurred in the early 1990s in the NCSA Mosaic web browser, which laid the foundation for Internet Explorer. Developers implemented a pulsating activity indicator to inform users that the browser is working and pages are loading. The main task of a throbber is to show the user that the program has not frozen but continues to perform actions.

Additional functions

Besides informing about the loading process, a throbber enhances the user’s experience of the website or program. During the loading of content, such as styles, fonts, and images, elements may load unevenly. A throbber hides these unsightly moments so that the user does not see empty or incorrectly displayed elements. Additionally, a throbber can:

• Keep users engaged by drawing attention to creative animations.
• Distract from waiting by creating the illusion of fast progress.
• Increase brand recognition through logos or unique inscriptions.

Where is a throbber used?

A throbber appears when a website takes longer to load than expected or when there is no response from the server. You can see a loading icon in the following places:

• On the website tab in the browser.
• In the browser's address bar.
• On the screen during page loading.
• On slowly loading elements, such as images or videos.
• In mobile applications and programs.

A throbber can completely hide a resource or allow interaction with it, for example, to cancel the download or return to the homepage. If the resource is completely hidden, the user has no choice but to wait for the loading to finish.

Variations of throbber representation

When first used in web browsers, throbbers took the form of an animated program logo, and this method remains popular to this day. Subsequently, a spinning ring icon, known as a spinner, emerged and became prevalent. It can be visualized in various styles, depending on the company's branding and the website's design.

The main requirements for loading animation include its dynamism. The most common types of preloaders include:

• Flashing dots in a circular shape.
• Changing symbols in console programs.
• Animated GIFs or CSS animations.

How to add a throbber to a website without coding knowledge

To implement a loading animation on a website, you do not need to be a programmer. There are several simple ways:

Specialized services

Use online services that allow you to create or download a loading animation and generate code for embedding. Examples of such services include:

• Hello-site.ru preloader builder.
• Codepen.
• Loading.io.
• Svgator.
• CSS Loader Generator.

After creating the animation, simply copy the generated HTML or CSS code.

Plugins for WordPress

For WordPress sites, there are special plugins available, such as LoftLoader, WP Smart Preloader, or “Preloader.” After installing and activating the plugin, you just need to choose the desired design and configure the element.

Built-in features of website builders

Some website builders have built-in features for adding a throbber or loading animation. For example, in Tilda, you can use the “microanimation” element by adding the “T228” block to the top of the page.