Search

Nalezeno "loader": 19

An Approach to Lazy Loading Custom Elements

13.2.2023
We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s experiments, I recently set about writing a simple auto-loader: Whenever a custom … An Approach to Lazy Loading...

Single Element Loaders: Going 3D!

1.7.2022
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...

Single Element Loaders: The Bars

24.6.2022
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 … Single Element Loaders: The Bars originally published on CSS-Tricks. You should...

Single Element Loaders: The Dots

17.6.2022
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, … Single Element Loaders: The Dots originally published...

Single Element Loaders: The Spinner

10.6.2022
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 … Single Element Loaders: The Spinner originally published...

Every Borderlands Game, Ranked From Worst To Best

19.5.2022
Once upon a time, it seemed like Borderlands could’ve been just a fad. But between the hot new game, the hotly anticipated upcoming game, and the forthcoming silver screen treatment, it’s safe to say Borderlands is having its biggest year ever. The series is now cemented in video game canon....

Image Trail Animation for an Intro

3.5.2022
An intro animation concept with an initial loader and an intro screen that animates to a new layout using various effects. The post Image Trail Animation for an Intro appeared first on Codrops

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

26.8.2021
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 … The post How I Made a Generator for SVG Loaders With Sass and SMIL...

My Struggle to Use and Animate a Conic Gradient in SVG

8.7.2021
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 … The post My Struggle to Use and Animate a Conic Gradient in SVG appeared first on CSS-Tricks....

svg-loader: A Different Way to Work With External SVG

19.5.2021
SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external … The post svg-loader: A Different Way to Work With External...

A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders

3.3.2021
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 … The post A Bare-Bones Approach...

Libraries for SVG Drawing Animations

11.11.2020
In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it’s drawing itself. It’s 2020 now, and the trick is still popular. I’ve seen it on a lot of websites I’ve visited recently. I, too, feature an animated SVG loader on my website using one of the libraries I’ll...

Digging Into the Preview Loading Animation in WordPress

22.10.2019
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. That's what you get when saving a post draft and clicking the "Preview" button in the editor. How'd they...

Let’s Make a Fancy, but Uncomplicated Page Loader

15.10.2019
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 site is loading faster than it actually is. There’s no shortage of ways...

The Making of an Animated Favicon

15.8.2019
It’s the first thing your eyes look for when you’re switching tabs. That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard to represent what’s...

The Fragmented, But Evolving State of CSS-in-JS

20.12.2018
TLDR: The CSS-in-JS community has converged on a consistent API. Not so long ago, a Facebook engineer compiled a list of the available CSS-in-JS methodologies. It wasn’t short: aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light...

Collective #420

31.5.2018
Sculpting Software Animation * Solving Life's Problems with CSS * Critters * Goat * code.xyz * Proppy * Deno * Prerender-loader Collective #420 was written by Pedro Botelho and published on Codrops

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace