SVG Loader Animation

Here are 10 different examples, from the simple to the more complex.

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Animated – SVG Loader

A clever change of pace from the rotating circle, this animation combines multiple circles rotating back and forth.

See the Pen Animated – SVG Loader by Steven Roberts (@matchboxhero) on CodePen.

SVG Page Load Animations

Three of the more typical, simple loading animations.

See the Pen SVG Page Load Animations by Bridget Reed (@BridgetCReed) on CodePen.

SVG Loader

Here’s a complex, very specific loader that you could use all or parts of to make it your own.

See the Pen SVG Loader by Swarup Kumar Kuila (@uiswarup) on CodePen.

Animated SVG Loader

This is a fun, somewhat mesmerizing loader with several moving parts.

See the Pen Animated SVG Loader by Tony (@thgaskell) on CodePen.

Electric SVG Loader

Very different from the flatter animations, here’s an electric rotating ring.

See the Pen Electric SVG Loader by Shaw (@shshaw) on CodePen.

CSS3 + SVG loader animation

A cute cartoon plane flying through the clouds while the page loads.

See the Pen CSS3 + SVG loader animation by lionelB (@lionelB) on CodePen.

SVG ∞ loader (no JS, cross-browser, minimal code)

A literally infinite animation.

See the Pen SVG ∞ loader (no JS, cross-browser, minimal code) by Ana Tudor (@thebabydino) on CodePen.

UXBOX pencil loader

Here’s another change of pace from the norm – a rotating pencil!

See the Pen UXBOX pencil loader by elhombretecla (@elhombretecla) on CodePen.

SVG Spinner / Loader

A clever combination of the word loading and a circle spinner.

See the Pen SVG Spinner / Loader by Marcus Hall (@flurrd) on CodePen.

Animated Gradient SVG Loader

Another very specific animation that you can use for inspiration or edit to make it your own.

See the Pen Animated Gradient SVG Loader by Paul Thomas (@motionimaging) on CodePen.

Triangle SVG Loader (pure css)

For our last example we have a simple single line triangle loader.

See the Pen Triangle SVG Loader (pure css) by Dominic Kolbe (@dominickolbe) on CodePen.

To save you the hassle of searching, we’ve compiled a handy list of SVG animations here that reflect the broad sense of what these animations are and how you might be able to use them on your website.

SVG Animation

See the Pen
SVG Animation by jjperezaguinaga (@jjperezaguinaga)
on CodePen.

This animation features a large circle with text in the center and buildings spinning around the outside of it. A lively, fun SVG animation sure to work well for travel websites.

SVG Loader Animation

See the Pen
SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan)
on CodePen.

This SVG loader animation is a fantastic choice for filling load time on your site. This could be used just before the main content of your site loads or when a visitor clicks on a link.

SVG Text Animation Using Stroke Offset Method

See the Pen
SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem)
on CodePen.

If you need some flashy text to entice visitors, this SVG text animation would be a good fit. The blocky, stacked letters offer real appeal and visual interest.

Diving SVG Animation

See the Pen
Diving SVG Animation by Chris Gannon (@chrisgannon)
on CodePen.

Add a sense of motion to your site with this diving animation. The line continues to leap and dive across the screen. This would make a fantastic loading animation.

Circle, square, triangle, dolphin

See the Pen
Circle, square, triangle, dolphin by Max Gruson (@bleepbloop)
on CodePen.

This is a fun animation that includes shapes and a dolphin leaping across the field of view. This would make for an engaging way to keep visitors invested in your site’s content.

SVG Animation of a Desk

See the Pen
SVG animation by Hoàng Nhật (@thiennhat)
on CodePen.

If your site is for the corporate set, this SVG animation of a desk offers a cute look at a workspace. It’s interactive, too!

SVG Animation Experiment

See the Pen
SVG Animation Experiment by Hamish Williams (@HamishMW)
on CodePen.

This animation could be used for a number of purposes on your website. One way I could think of is as an email prompt. Engage visitors with the slide-in cards then once clicked, the cards compile into an envelope and are sent away. Fun!

Happy New Year 2020

See the Pen
happy new year 2020 by Swarup Kumar Kuila (@uiswarup)
on CodePen.

For something festive and fun, this Happy New Year animation could turn any website into a celebration.

Atom Loading Icon

See the Pen
Atom Loading Icon by Jon Milner (@jonmilner)
on CodePen.

Here’s another loading animation that you could use on any part of your site where you anticipate requiring visitors to wait a moment. This icon takes the shape of an atom swirling about.

404 Error Page

See the Pen
404 error page by Swarup Kumar Kuila (@uiswarup)
on CodePen.

Why not add some visual interest to your 404 page with this animation? It shows people searching with flashlights with a huge “404” looming in the spotlight.

Interactive SVG Animation

See the Pen
Interactive SVG Animation | Trick or treat_ by Issey (@issey)
on CodePen.

This is another really fun one. This animation is spooky as can be, featuring a haunted house with trick or treaters poised outside. One click of the moon and all the ghosts come out.

Li’l Vikings

See the Pen
Li´l Vikings by Fabio (@FabioG)
on CodePen.

This SVG animation shows boats and giant tentacles rolling across waves. The cartoon style is engaging and fun, and could certainly work well for a number of different websites.

Responsive Cow Jumps Over the Moon

See the Pen
Responsive Cow Jumps Over the Moooooon by Sarah Drasner (@sdras)
on CodePen.

What website doesn’t need a cow jumping over an astronaut on the moon? That’s what I want to know.

Beating Heart

See the Pen
Beating Heart – CSS and SVG animation – low poly by morkett (@morkett)
on CodePen.

This highly geometric and intricate beating heart offers visual interest and could easily be used on many sites, from science-focused to charitable projects.

Pointless Rider

See the Pen
Pointless Rider by Elliott Munoz (@elliottmunoz)
on CodePen.

This super adorable bear riding a bike could be modified for logos or just used as a fun loading screen to add interest and engagement on your site.

#1 Coffee Machine

See the Pen
#1 – Coffee Machine – SVG animation with CSS3 by Jonathan Silva (@jonathansilva)
on CodePen.

Last on our list here is an adorable animation of an anthropomorphized coffee machine, doling out cup after cup. It’s cute, it’s fun, and it could be used as a loading screen or as a section break for a coffee shop’s website.

SVG Animations Make an Impact

Though not strictly “necessary,” SVG animations add that little something extra to websites. Whether you use them as loading screens, section breaks, logos, or headers, these animations add an undeniable visual appeal to websites across every niche and category.

Now that you’re familiar with what they are and have seen some examples, maybe it’s time to start thinking about how to add them to your website.

SVG filters are simply effects that can be applied to images and even text, but you can do much more than is possible with CSS. Blurs, drop shadows, animations, and other effects that you can often only find in advanced graphics editing programs are all available to you.

Ready to learn? These resources, demos, and tutorials will teach you to use these super helpful filters.

SVG Filters 101

For those looking to learn SVG filters, this page is the best place to start. Codrops introduces you to SVG filters with its helpful online tutorial. It’s not a short read, but by the end, you should have a basic understanding of SVG filters and be ready to apply them on your own site!

The Art Of SVG Filters And Why It Is Awesome

This tutorial gets a bit more into the meat of things, showing you primarily how to style text with filters. There’s code for lighting effects, noise, strips, outlines, and all sorts of other neat effects. This normally takes a fair bit of skill with outside programs to get it right, but you can do it just with some lines of code.

Stranger Things Logo in SVG

Here’s a cool example of what you can pull off with these filters. This “Stranger Things” logo is rendered in nothing but SVG, complete with the spooky flicker effect and neon lighting.

Image Distortion Effects with SVG Filters

Looking for a cool image distortion effect? Three interesting hover effects are showcased here, along with a few tutorials so you can learn to create your own.

SVG Filters Playground

This is a tremendous resource for new programmers. Here’s a sandbox for you to test out and play with various SVG filters, applied to both images and text! And if you like the effect you made, you can even copy it and try it on your own site.

Using SVG to Create a Duotone Effect on Images

Duotone images are quite popular thanks to Spotify, but you don’t need to learn how to use gradient maps to create one. Just pop in this code and you can create your own gorgeous duotone images!

Gooey Text Background With SVG Filters

The “gooey” filter is used to create a blob-like object similar to a cell. You can also use it to make a rounded background for your text. And the best part is, it’s a dynamic filter that changes to fit the text size!

Ripple (SVG Filter + CSS)

Here’s a weird, colorful ripple effect made with a combination of SVG and CSS! It might make a great background or banner for part of a webpage. Here’s the magic: it’s just a bunch of straight, rotating lines with a displacement map filter.

Image Transitions Using SVG Filters

Sick of boring blurs and slides in image transitions? Here’s something more interesting: a dynamic dissolve transition effect that cycles between multiple images.

Motion Blur Effect Using SVG Filters

Another cool transition effect, this one is a slider that applies a motion blur and squishes the image as it transitions. No more simple sliders; make your site stand out with a pleasing animation.

Mastering SVG Filters

For web designers and developers, it’s important to always be learning new skills. SVG filters can save a lot of time that might have been spent in a graphics editing program. Instead, just pop in some code and you have a professional image filter effect – simple as that!

Now that you’re a master of SVG filters, it’s time to get out there and start designing a beautiful website.

But not every designer knows their way around Adobe Illustrator. It takes time to master the art of creating SVGs from scratch.

Thankfully, with these icon sets you don’t have to master anything besides clicking a download button. All of these icon packs are 100% free and open source for use in any project. And many of them include other formats besides SVG – so they’re great for all UI design work.

Jam Icons

One of the newest and lesser-known icon sets is Jam Icons. This pack comes with 400+ icons (and counting). They’re all designed in simple shapes with flat styles and basic color schemes.

As of this writing, the icon pack is in version 1.0.72 – but it’s frequently getting minor tweaks and updates that include new icons. That wacky version number is a hint that this pack gets updated quite a bit.

Devicon

Here’s another new icon set that I haven’t seen mentioned too much.

Devicon is basically a pack of developer-themed icons that include logos from all of your favorite tech brands. The icons range from corporations like IBM and Google to more specific software like MongoDB.

All the icons come as SVG vectors or as icon fonts – so it’s your choice how to embed them into your page.

Open Iconic

The Iconic icon pack has its own “open” version, with 220+ free icons available for download.

Again, these use a combo of flat design mixed with line icon styles to create a very simple aesthetic. They’ll work on pretty much any website.

You can even download the icons as font files and merge them with major frameworks like Bootstrap. This is a fantastic choice for a simple and free SVG set.

Evil Icons

The oddly named Evil Icons should feel anything but evil.

This pack is absolutely massive and it comes with everything – including SVGs and the original source files. That means you can download SVGs along with AI files for Illustrator and the .sketch files for Sketch.

Every icon follows the thin line style and they’re perfect for most websites. The fact you can edit the original source makes them even more valuable.

Twemoji

Twitter’s emoji library is pretty big and they’ve got lots of cool stuff included.

Given Twitter’s track record with open source, it’s no surprise that they released Twemoji – their own proprietary emoji iconset, fully open-sourced online.

The library offers a massive 2,500+ icons in all. They include icon fonts and SVG files that you can edit on your own as you wish.

And there’s so much variety here that you’ll have plenty to choose from.

Metrize Icons

If you’re looking for more metro in your design work, then your search is over with these Metrize icons.

They’re open sourced and designed for easy editing. The pack includes 300 icons designed with circular borders, although you can easily remove them.

Ultimately, this was made to help anyone creating flat websites or following Microsoft’s metro theme in website projects or mobile apps.

Captain Icon

I first stumbled onto Captain Icon many years ago. To this day, it’s still one of my favorite icon sets – I even use them in my own portfolio site.

Captain Icon is most practical as a simple icon font. But you can download the full pack, including SVG files to edit, customize and restyle to suit your needs.

What I like most about Captain Icon is the funky design style.

All of the icons look hand-drawn, which is really unique and valuable to anyone who wants to bring that style into their design.

Universal Icons

The Universal Icons were originally released for free through Flaticon. They’re a search engine that curates free icons following the flat design style.

One thing to note about Flaticon is their stringent requirements. You have to create an account (free) to download the SVG pack. And, if you use them on a website, you typically have to credit Flaticon somewhere on your site.

This isn’t too difficult, but it is worth noting before you publish anything.

But one look at these icons and you’ll see why they’re so valuable to anyone who wants a design that’s simple, elegant and colorful.

Micon

Here’s another Microsoft-themed icon pack named Micon.

However, this one is focused more on Windows 10 icons—and they pack quite a punch. The design quality is on point and really phenomenal, despite the massive size of the library.

Micon is released for free on GitHub, so you can download everything from the site with a couple of clicks. You may want to have a look at their icon list first, just to see what’s inside.

Feather

Feather icons are everything you’d want in a simple line icon set.

They’re easy to edit, clean and crisp – regardless of size. Not to mention this was designed as an icon font first, so it’s meant to be embedded as a web font.

But Feather’s master download includes all of the icons as SVGs as well, in case you’re looking to make some edits on your own.

Plenty of information is available on the GitHub repo if you would like to learn more.

Zondicons

Zondicons markets itself as a premium set of SVG icons. I’d say that label is pretty accurate.

These icons include a mix of line icons and simpler flat icons with fill colors. They all come as SVG files and the full icon list is pretty massive.

One downside: these icons are not linked directly to GitHub. The website’s download link pulls from a .zip file hosted on their servers.

I’m a fan of GitHub for centralization. That way, you always know when the files were last updated and what’s inside.

This isn’t a huge deal breaker, but it’s something to note before you download.

After some time, the aim for advanced 2-dimensional vector computer graphics on the Web came into being. With so much competing formats that were submitted to W3C, SVG was finally developed in 1999.

Now that we published the CSS shapes tutorial, we wanted to show you how to create shapes with SVG. This tutorial will explain how to use SVG in web pages.

What is SVG?

SVG, which stands for Scalable Vector Graphics, is an XML-based vector image format for the Web. Unlike GIF, PNG and JPEG image file formats, SVG is scalable, which means that no matter how you scale or enlarge the image file, the quality will still look good.

As an XML file, SVG can be created, customized and integrated with other W3C standards such as DOM and XSL using any text editor. SVG images can also be created visually using drawing or vector programs like Adobe Illustrator.

Why Use SVG?

• Can be created and edited with any text editor
• Can be printed with high quality resolution
• Can be used for animation
• Is a W3C recommendation
• Works with other W3C standards like DOM
• Looks great for retina diplays
• Scales to any size without looking stretch out

SVG on HTML Pages

SVG can be easily embedded into HTML using SVG tags. Consider the syntax below.

<svg width=" " height=" ">
[element code here..]
</svg>

As you can see, SVG has its own tags. SVG must have a width and height so as to contain its element. The following are the elements can be used to draw inside its canvas.

• Circle
• Rectangle
• Ellipse
• Line
• Polyline
• Polygon
• Path
• Text

So let’s jump in and start this awesome tutorial.

Creating a Circle in SVG

Circle SVGs can be executed by using the circle tag. Here’s an example.

<svg height="300" width="300">
    <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
</svg>

The resulting Circle SVG image will look like this:

In this example, I used the circle tag and then define the cx (x coordinates) and cy (y coordinates) which will determine the center of the circle. Next, I put a value of 50 on the r (radius), which defines the length of a line segment from its center to its perimeter. Finally, I added the styles for fill color, stroke color and stroke-width, which are pretty much self- explanatory.

Creating a Rectangle in SVG

Rectangle can be executed by using rectangle tag and can draw various kinds of height and width. Check out the code below.

<svg height="300" width="300">
    <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/>
</svg>

The resulting Rectangle SVG image will look like this:

Using rectangle tag, I define the width and the height of the rectangle. Then I added rx and ry, which rounds the edge of the rectangle. You can remove this two (rx and ry) if you want to have sharp edges. Next we added the styles for fill color, stroke color and stroke-width.

Creating an Ellipse in SVG

Ellipse SVG can be executed by using the ellipse tag. Ellipses don’t need to have equal height and width and unlike circle SVG the radius (cx and cy) is different. Consider the code below.

Consider the code below.

<svg height="300" width="300">
   <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/>
</svg>

The resulting Ellipse SVG image will look like this:

The cx and cy define the center of the ellipse while the rx and ry define the radius of the ellipse. As you can see, the rx describes the wideness of the ellipse while the ry describes how tall it will be. Then we put up the styles for fill color, stroke color and stroke width.

Creating a Line in SVG

Line SVG can be executed by using the line tag. From the name itself, the tag is used to draw lines. Check out the example below.

<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
</svg>

The resulting Line SVG image will look like this:

On this example, x1 (x-axis) and y1 (y-axis) define the starting point of the line. While x2 (x-axis) and y2 (y-axis) define the ending point of the line. Using the style attribute, I put a stroke color of black and a 5px stroke width.

Creating a Polyline in SVG

A polyline SVG can be executed by using the polyline tag. It is used to draw shapes which are composed of straight lines. Here’s an example.

<svg height="300" width="300">
   <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3" />
</svg>

The resulting Polyline SVG image will look like this:

Using x (x-axis) and y (y-axis), you can set the each individual points of the lines to create a specific shape you want. As you can see here I have 4 set up points joined by lines. I also added a stroke of black and a stroke-width of 3px.

Creating a Polygon in SVG

Polygon SVG can be executed by using the polygon tag. This element will draw shape that has more than 3 sides. Check out the code below.

<svg height="300" width="300">
    <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1" />
</svg>

The resulting Polygon SVG image will look like this:

In Polygon SVG, points are being defined by the x and y axis for each side of the polygon from the last point to last one. In this example, I created a hexagon with 6 sides. As you can see, there are 6 points that connects together defined by x and y axis. Then I put fill color of cyan followed by stroke color of red and stroke width of 1px.

Creating Paths in SVG

Path SVG can be executed by using the path tag. This element will draw advance path and shapes which consists of curves, lines, and arcs. Among the entire SVG elements, this is one of the most functional yet hardest to learn and manipulate. Path SVG uses the following commands:

• M move to
• L line to
• V vertical line to
• H horizontal line to
• C curve to
• S smooth curve to
• T quadratic Bézier curve
• A elliptical arc
• Z close path

Uppercase letters mean the position will absolutely position while lowercase letters mean relative positioning. See the example below.

<svg height="300" width="300">
<path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" />
</svg>

The resulting Path SVG image will look like this:

From the code above, you can see that I used the letter d. This d attribute will always be a move command. Next, I use M which means move to. Before you can draw anything, you must move the virtual cursor to your preferred location.

So for this example, I move the x-axis to 30 white the y-axis to 40. The curve begins at 140, -30 as our tangent starting point. Next the curve points down to the right with the points 180, 90 and ends up with 20, 160. To finalize the path, I created a line with points 120 and 160.

Creating Text in SVG

Text SVGs can be executed by using the tag enclosed with the text tag. This element is used to draw text in an SVG image.

<svg height="300" width="300">
  <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text>
</svg>

The resulting Text SVG image will look like this:

In this example, I set the x-axis position of the text to 20. This will place the text 20 px from the left while I set up the y-axis to 30, which will place the text 30 px from the top. Next, I set up a fill color of blue and set the font size to 20px. This will display the text “This a great sample for Text SVG!”

Some web designers give special attention by providing users with some entertainment while the all the information they want to see are still waiting to be fully loaded like this tutorial on how to create SVG loading animations using Illustrator and Adobe Edge Animate CC.

There are a lot of loading animations out there. Sure, you can copy and paste these animations to your designs every now and then, right? Yeah, making use of templates are easier and more convenient. But there are times you need to do your own for learning’s sake.

This tutorial won’t require coding, so for those designers who don’t want to get their hands dirty with codes, here’s a great tool for you.

Why you should  choose SVG as a file format for all the images:

• They are resolution independent.
• Can be used together with CSS.
• They are lighter than JPEG.
• They can be easily edited.

Now, I would not keep you waiting, here’s the tutorial!

Bonus:

Aside from loading animations, you can also create the following using Illustrator and Edge Animate:

• Interactive Graphics
• Header Animations
• Google-like Doodles

Conclusion

I hope you learned something today! There are more of these tutorials to come so keep your tabs open for 1stwebdesigner! Good luck!

Do you have questions about the process we just followed? Feel free to ask us at the comments section below.