Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
loader

14 Articles
{
,

}
Image
Direct link to the article Single Element Loaders: Going 3D!
3d clip-path gradients loader mask

Single Element Loaders: Going 3D!

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But  maybe we can get away …

Image
Temani Afif on Jul 1, 2022 Updated on Aug 27, 2023
Image
Direct link to the article Single Element Loaders: The Bars
css animation gradients loader pseudo elements transform

Single Element Loaders: The Bars

We’ve looked at spinners. We’ve looked at dots. Now we’re going to tackle another common pattern for loaders: bars. And we’re going to do the same thing in this third article of the series as we have the others …

Image
Temani Afif on Jun 24, 2022 Updated on Aug 27, 2023
Image
Direct link to the article Single Element Loaders: The Dots
background-position gradients loader mask

Single Element Loaders: The Dots

We’re looking at loaders in this series. More than that, we’re breaking down some common loader patterns and how to re-create them with nothing more than a single div. So far, we’ve picked apart the classic spinning loader. Now, …

Image
Temani Afif on Jun 17, 2022 Updated on Feb 15, 2024
Image
Direct link to the article Single Element Loaders: The Spinner
animation gradients loader mask pseudo elements

Single Element Loaders: The Spinner

Making CSS-only loaders is one of my favorite tasks. It’s always satisfying to look at those infinite animations. And, of course, there are lots of techniques and approaches to make them — no need to look further than CodePen to …

Image
Temani Afif on Jun 10, 2022 Updated on Aug 27, 2023
Image
Direct link to the article How I Made a Generator for SVG Loaders With Sass and SMIL Options
generator loader Sass SMIL SVG

How I Made a Generator for SVG Loaders With Sass and SMIL Options

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and …

Image
Mariana Beldi on Aug 26, 2021
Image
Direct link to the article My Struggle to Use and Animate a Conic Gradient in SVG
conic gradients loader mix-blend-mode SVG

My Struggle to Use and Animate a Conic Gradient in SVG

The wonderful company I work for, Payoneer, has a new logo, and my job was to recreate it and animate it for a loader component in our app. I’ll explain exactly how I did it, share the problems I …

Image
Amit Sheen on Jul 8, 2021
Image
Direct link to the article A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders
lazy loading loader

A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders

UI components like spinners and skeleton loaders make waiting for a page load less frustrating and might even affect how loading times are perceived when used correctly. They won’t completely prevent users from abandoning the website, but they might encourage …

Image
Adrian Bece on Mar 3, 2021
Image
Direct link to the article Digging Into the Preview Loading Animation in WordPress
css animation loader SVG animation WordPress

Digging Into the Preview Loading Animation in WordPress

WordPress shipped the Block Editor (aka Gutenberg) back in version 5.0 and with it came a snazzy new post preview screen that shows the WordPress logo drawing itself while the preview loads.…

Image
Geoff Graham on Oct 22, 2019
Image
Direct link to the article Let’s Make a Fancy, but Uncomplicated Page Loader
animation beginner fade loader

Let’s Make a Fancy, but Uncomplicated Page Loader

It’s pretty common to see a loading state on sites these days, particularly as progressive web apps and reactive sites are on the rise. It’s one way to improve “perceived” performance — that is, making it feel as though the …

Image
Maks Akymenko on Oct 15, 2019
  • 1
  • 2
  • Older Image

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement