SVG & CSS loader animation without code with Google Web Designer | Niraj Kumar | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

SVG & CSS loader animation without code with Google Web Designer

teacher avatar Niraj Kumar, Sr. Graphic & UI/UX Designer / Animator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (39m)
    • 1. Welcome to this exciting course

      0:27
    • 2. About SVG

      1:26
    • 3. Exporting SVG from illustrator

      1:29
    • 4. About GWD

      1:08
    • 5. GWD Interface

      4:24
    • 6. Importing SVG image and inline SVG

      1:32
    • 7. Selecting image SVG

      1:29
    • 8. Selecting Inline SVG & CSS Positioning

      2:27
    • 9. Alignment & layers

      1:21
    • 10. Changing color of inline SVG

      1:35
    • 11. Snapping and moving origin point

      0:34
    • 12. Animation & Timeline

      1:59
    • 13. Wrapping & Responsive Layout

      2:08
    • 14. Refining Code & Publishing

      3:26
    • 15. Project2 - Dot spinner

      11:52
    • 16. Project3 - Gear Animation

      1:42
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

315

Students

--

Projects

About This Class

In this training We will show you a ultimate way to create SVG & CSS Loader Animation without writing any code.

Currently, we know that svg and css animation is possible only through code but here we have tried to break the barrier to know html5 or css and it is all possible through Google Web Designer. The generated code for SVG & CSS is industry standard, precise and clean.

Who can join this course?

  • This course is suitable for web designers and animators.
  • Suitable for Beginners & Web design enthusiastic
  • Web Developers or Advanced learners, can also join this course if they want to know the quick approach to create SVG animation. 

eab15a0d

b81ebc11

Meet Your Teacher

Teacher Profile Image

Niraj Kumar

Sr. Graphic & UI/UX Designer / Animator

Teacher

I have 15+ year of experience in graphic, web, animation, advertising and interactive media.  I works with many clients across the globe. Now I am here to share my experience, knowledge and provide solutions to complex design challenges in easy and project based approach. My training methodology will be easy to follow and it is based on step by step project based training.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to this exciting course: Hello, everyone. My name is Nirajan. Today I will show you ultimate way to create loader animation based on SVG and CSS, but all without writing any code. This is all possible through Google Web designer. Also, the generated code will be industry standard, precise and clean. So let's start this exciting new journey with upcoming videos. 2. About SVG: So what is S V G S V G stands for scalable vector graphics. It is very lightweight XML based file format. Due to this, it is very popular and widely used format, which supports all browsers and devices like IOS, Android, PC and Mac. SVG defines graphics in XML format. There is circle, and this is Victor SVG file, but in the background it is made with XML coding. SPG file can be stretched or compressed without losing image quality, and and it doesn't look blurred on devices with high pixel density. If compared with raster images, SVG is used in Web graphics, animation, user interfaces, print and high quality design. SVG images can be created and edited with Adobe Dreamweaver or a program like Note Pad Plus Plus. Or it could be edited with some graphics program like Illustrator, Coral Drawer, Think Scape or Gravitt, Designer 3. Exporting SVG from illustrator: in this training programme, I will show you how to make this loader animation using CSS three with Google Web designer before creating animation, we have already made drawing an illustrator. Now we will export it in static image file. Here we can see two layers Quarter circle in full circle, select both layers and go to file. Go to export option and click on export for screens. We can give it a name for 1st 1 which is full circle. And for 2nd 1/4 circle, click this icon to choose location folder, select the desired location folder where you want to save it. We can select this option open location after export if want to open a folder automatically just after exporting it. I leave this d selective. Leave this option selected because it will create a new folder called SVG, where these files would be saved for formats we can choose SVG click on export asset. No, By going to location folder, we can see S V G folder on within These two files is saved 4. About GWD: This is the U. R L of Google Web designer. This is freely available software, which can be downloaded from this u R l and it is available for Windows, Mac and Linux systems. We can create HTML five Web sites and animation using this software. Here we will use it to create SVG animation with HTML five and CSS three. Basically, using this software, we can create HTML five animation and design very easily without writing any code. And and interesting thing is, the generated code in the background is very clean and precise. As far as its feature concern, we can also make interactive clickable SVG animation along with we can also make it responsive, which supports all devices, including IOS, Android and different browsers. Also, we can create three D animation in two D environment. Now let's move to Google Web designer to create stunning SVG animations 5. GWD Interface: This is the basic interface of Google Web designer. From here, we can create new file. If we want to create any template, then we can use that. That template is used for Google ad banners. This is find helping by going through. We can know more about Google Web designer and take any help if required. If you want to open any existing document, then it could be done by clicking here. For now, I click here on create new file as I have to make SVG animation. So we go to others and click on HTML and put name related to Project Will have, as we have to make a load us. We name it loader. And for location, you can click on this tiny folder icon, select the desired location and click on Select folder. We can put the same title name is Project Name and in animation, mo twos advanced and click. OK, we can see here. This is the basic interface of Google Web designer. This is the toolbar in left, and this is the options bar. Whatever tool we select, its options will be visible. It Options Bar and this is the menu Bar with different menus. I file edit, view, window and help. Other than that in the top right? This is designed view, and when we click on this, we can go to code view. This is code view, and this is preview. Any browser which is installed in system will be displayed here. We can make any browser is a default browser by selecting here. When we click on preview that animation would be visible on that browser. This is published option. If we want to publish, then we can select locally or Google drive. Now go back to design view, and in the right side we can see different panels for many different purposes. For example, if we want to fill any color in any object like rectangle, then we can use this color panel. Similarly, we can also change the border color. If you want to make changes on text, then we can do it from here. From text panel, we can align text. It's font size, etcetera, and we can change the color of the text. This is library panel. If any images used in the document, then all those images can be seen here in the library panel. If you want to change any HTML five properties like body or different HTML tags, then we can handle those properties from here. This is event panel. It could be used to make animation interactive with click mouse or different timeline events. This is CSS panel. This panel is used to define CSS for animation. Using Responsive Panel, we can create different media queries for different devices to make html five banners or animation responsive. Besides this, all those panels which is showing here a floating panels, means we can detach any panels like that. We can also detach different section of this panel like this. We need to hold and move out back to its default position. A yellow horizontal line indicates its placement position. If we want to keep both panels together, then just hold the area within yellow line and drag to respective location. You can see her vertical yellow line indicating that it will be placed in the side of text panel. We can also move this timeline panel to top if we want to reset its workspace, then go toe Windows menu and go to work space and then click on reset default now we can see all panels place to it's default position. So this is all about interface of Google Web designer. 6. Importing SVG image and inline SVG: we already have Document created. Now we will import SPG files which we already exported from Illustrator. So go to file and click on import assets and files location folder and select both files and click on open. We can see here that this s V G is imported is an image svg with image tags showing here along with we can also see same thing in library panel. Now I will show you another way to import. SVG is an in line xvg before importing in line S V G. Let's delete this by pressing del key on the keyboard and go to code view And here within body tag, we give some space between and got to location folder where SVG file is saved and select both Swedes and move it within body tag. Here we can see this SVG is imported within body tag. Now go back to design view. We can also see in the timeline the S V G tag is visible here 7. Selecting image SVG: here we will know how to select and transform image svg. So go to toolbar first and make sure pick to the selective. Now go to library panel and select this full circle S V t and hold and drag it to the canvas. Here we can see this is image xvg. You can see a blue outline around this circle which indicates that it is selected. With this election, we can move it around the canvas. But if we want to scale or rotate, then there is another option which is called Transformed Control, which is situated in the options bar. So go to transform control and selected. We can see a bounding box around this circle. And if we want to scale it, then by holding these notes, we can scale it by holding shift, key, weaken scale in proportion. And if we scale by holding old key, then we can scale it from center. And if we Pressel pass shift key together, then we can scale it in proportion from center 8. Selecting Inline SVG & CSS Positioning: here we will discuss how to select in line svg Firstly, this image svg we have already placed in line svg If we select this suppose if we want to select this quarter circle and try to move in the canvas then we can see here only bounding boxes moved from its actual position. The rial object couldn't moved. This might be a reason that Google Web designer does not support in line svg completely. Here we will show a trick so that we will be able to move in line svg in the canvas even weaken a scale and rotate in the canvas here we noticed when we moved this bounding box in the stage a automatic class name is created First we rename the class name a name it Quarter circle. We also noticed that during the movement of bounding box, an automatic left and top position is defined If you know CSS, you might aware that there are five types of CSS positioning available first is static. Second is relative third is fixed fourth is absolute and 50 sticky Here we will use absolute positioning. Basically absolute positioning is defined from zero x and zero y axis in the document body of HTML five. So to give a position, we type position and give its value absolute. Now we can see that the object has moved along with its founding box. Now we can move this object around the canvas now in similar manner. We will set the positioning of this full circle. So selected first, we can also select it through timeline panel by selecting its layers. Now go to CSS panel to create a new class click on this plus icon. We have clicked it and here we can run a mixed class full circle and set its position in its value. Absolute. So this is how we can select in line svg and move around the canvas. 9. Alignment & layers: now we need its alignment to its default alignment for doing this. First we select this full circle layer here we can see talking left value, which we de select for now. Now we can see that it is reposition that zero X and zero. Why access in similar way. Now we select this quarter circle layer. We also disable its left and top value. Now it is also moved to zero X and zero y axis. But here we see that the full circle is in top. Quarter circle is behind it. So to change its order, we go to layers and top layer is full circle layer. First we give it a name so that it could be known that it is a full circle name right here . Full circle. This is quarter circle which is selected here. Give it a name. Quarter circle. Now to change the order, just drag it to the top. Now the quarter circle appears in the top 10. Changing color of inline SVG: here we will see how we can change the color of in line svg for doing his first we select the quarter circle and go to color panel in here we and here we can change any color we like. We see that the color is filled in the background of quarter circle But this is not we required in real sense. We need to fill this blue path. For example, If we want to fill the same color here, then first we copy this color press control plus iki. First we remove the background color that we filled before for this click here and no color option. Now go to code view We can see the current Phil property of blue color. So first we delete it from here and go back to design view again. Now we can see that it is looking filled with default black color. Now select it again. This time we go to CSS in line style and click on our property and tight Phil and paste the color which we copied earlier. And in the beginning we put hashtag and press enter and press enter. Now we can see that color is changes within in line S v t 11. Snapping and moving origin point: Now we have to rotate this quarter circle around this full circle. So first we have to move the origin point of this quarter circle to the center of this full circle. Before moving this, we have to make sure that snap should be selected here. We can see snap is selected now. Go to bounding box of quarter circle and move its origin point to center of this full circle. It is now snapped here. 12. Animation & Timeline: Now we have to rotate it. So first we select quarter circle, which is already selected, and we have to rotate it a 360 degree. There are two method to rotate it first method is to rotate on, said access by dragging Throat mouse. And second method is through Properties panel. Here are some options translation, rotation and scale. Before putting any value, we need to create a key frame on timeline. So first move the timeline scrubber to 1.5 2nd and right click here and select insert key frame. Here we one key frame is inserted. Here we put a value 360 degree rotation section. Now move this timeline scrubber to zero second. Here we can see that it looks animated. Here. We can see an option to play. Click on it. We can see the animation. We see that it is animated one time, and then it stops if we want to make it continously animated. For this, here is an option. Set animation. Repeat, Click on it and select Infinite Now to check, click on play button again. Now we can see that it is continuously animated. Now we check the same animation on browser, click on Preview and choose chrome here. We also see that it is animated. This is mobile view and this is desktop you. 13. Wrapping & Responsive Layout: here we see that animated object is placed a top left corner, which we have to keep in center of the page as well as we have to make it responsive. And for that, first we have to wrap. This breath means we have to keep animation within one Dave on Move single div into a page . For that, we select both logos together and doing right click. Here is an option. We can also see same in every menu. This is wrapped. Click on it. Now it is wrapped here. We can see that Dave is created. So first we name it Loader and double click on it and go inside. Here we can see same animation. Now go back to Maine, Tim line by by clicking on this body tag. Now we have to keep it in center for this click on this album to container, as we also have to make it responsive. So click on this fluid layout and here we can see some alignment options and to make it a line first we click on Align Horizontal and Vertical Center. Now we check in the browser, click on preview. We can see that it is looking fine. So it also looks good in all other mobile devices. Now, if we go to desktop view, it is also looking good in desktop browser. 14. Refining Code & Publishing: Now we have to publish it. But before that, we have to refine some codes. For that, we select this load of first, we have to change the name first, which we didn't do before. So right here for this main Dave Loader. Now we go to code you. And here we find that there are some classes which start from G W D keywords. So we have to change that. Here we can see that the classes which is showing here is generated for loader animation. So first we need to change its name. Let's do a copy. Press control plus e key on the keyboard Here is an option to find and replace. Select it. We see that copied items is showing here it this replace field now presenter here an option appears to replace with Here we have to replace it with loader animation, text press, enter again and click on all we see that all classes has been replaced with loader animation and here this is also replaced with same name. Now we have to rename the keywords G w d key Frings. So copy it press control, See using same method again go to edit menu and click on find, replace and press enter And here we right key frames because there was underscore. So here I put hyphen in the beginning. So we right here hyphen key frames press enter and replace it by clicking all. Now we can see that it is replaced with loader animation key frames. Now we will publish it before go to design view and now go to publish option and click on Locally. Here we select in line local files in line local files means it will generate a single HTML files where CSS HTML five and JavaScript codes exist. If you want your animation to support all the browser, then we can select these two options. Here I d Select this and click publish. Now go to location folder, where our files published here we see that only one single HTML five file is published. Now double click on it and open it on browser here. Now we can see that it is looking fine and also it is responsive. Now close it and go back to Google Web designer. So this is all processed to create loader animation. This is all about Google Web designer for SVG animation 15. Project2 - Dot spinner: with this project, we're going to create this spinner, which will rotating clockwise direction. We have already made a design in Illustrator, and for this I have already made a position. 1st 1 is this in 2nd 1 Is this from here? We will export. It is an image and then Google Web designer. We will use it as a reference point to set the positioning of these docks for animation. So let's export. It is a reference image. So select first image, then go to file exports selection and put a name loaded on one. From here, we can choose Location folder and click on export assets. Now select the second layer and go to file again export selection and name it loaded up to and leave other options as it is and click on export assets. So now go to Google Web designer, and this is interface, which we are already familiar with. Click on, create new file, go to HTML and set the location folder where we want. Save the file ad, click on Select folder and name it loaded dot and entitled we can put saying name loaded dot in animation mode, shoes advanced and click OK, we already have exported images, so let's imported should go to file and click on import assets. Now go to your location folder and select the files and click open. Let's zoom out a little bit to see the images and drag it over to center of canvas. Now rearrange the layers. Drag second layer to top of first layer. Select the zoom tool and drag around the images to zoom in. Now using selection tool, select the second layer and set its position to center a first layer image. Now what we have to do is to defuse both images, so go to properties panel and in fill option. Put the value 0.43 Now look both layers and hide the second layer so that we can see the first layer very clearly. Now what we have to do is to create an oval the top of this image, so to create a dot go to oval tool Here in the toolbar. This is over tool. We can see there are many tools available. Pen tal rectangle tool, oval tool in line tool. So select this oval tool that the options bar at the top go to stroke and select no color and in and select no color. And in the fill we have to keep the same color. We can choose the color from illustrator. Click on this fill color and copy this color hex values and paste it here. Now we can draw the oval directly t in the canvas so drag here like this and using section tool set its position. We also have to make sure the width and presenter So we have created 0.1 Now go to its CSS and put its name Don't Clinton won and press enter. Now we will make it duplicate to create all other remaining dots. So right click on this over and click on duplicate layers and drag it to place it here a name it got to again We make a duplicate for this oval and dragged to place it here a top and ran name it 0.3 again make a duplicate and drag to place it here and rename it got four Now make a duplicate again and drag to place it here for fifth dot a name it dot five. Now we have to put the rotation animation so before doing this. Move this timeline scrubber 2 30 milliseconds and select all layers except got one layer because we don't have to move it. So we lock it by holding shift. We have to select all layers, which we want to move it and doing right. Click and click on insert key frame. Click on this icon to hide this loader toe, hide this loaded on one player and then hide the loading dock to layer to make it visible. Now we have to re positional dots again. So we select this dot to lay first and move this to this position. And similarly, we will move all other dots to their next position, like move this 0.3 to this position and Paul say 0.4 to his position and drag 0.5 here. Now we can see that one animation is created now on Haida, loaded on one layer and hide this loaded dot to layer because to make a complete rotation, we need to reposition this dots again in their previous position of loaded 0.1 layer. So go to 60 milliseconds and here dr 0.5, to this position and drag dot to to this position and drag 0.3 here and set this oval to here. Now we can see that one animation is created now. What we have to do is to rotate the animation continuously and to rotate it continuously. There is an option set animation repeat, Select Infinite option. Similarly, we will do for all other layers and center Oval is already locked. It will be continuously static in all frames. Now, for a moment, we hide both reference layers to see a preview click on this repeat and play icon. Now we can see the animation is continuously rotating. Click on Pause Icon to pause it. Now we can remove layers of reference images is it? Don't have any further uses now select both layers and right click and select delete layers . Now we have to put all lays into one Dave so that we can align it in center to the canvas. So holding shift key. Click on this first layer. Now all layers is selected. Now go to edit and plate and click on rap and make sure lying to container and fluid layout should be selected. And now click on this align vertical center and the line horizontal center and give it a name in CSS loaded dot Now click on preview option. Now we can see it is continuously rotating, and this is just desktop view. So this is how we have created SVG animation for this dot spinner. Now, by going through code view, we can refine some code. We can remove the code that we don't want want like this paragraph and heading, which is not used here so we can remove this. We also need to refine some more code before publishing. Please follow previous video to make the refinement. To save our time, we have rename all cast name here, click on Publish Option and select locally and select in line local files in de Select Other Options and click on this Location folder and select the desired folder where we want to save the file and click on Select Folder. And we can change the name if we want. We re name with name published so that we could know. This is published folder and click on Publish. Now go to Location folder, where our files has been published. So click on this published folder and here is their index file. Click on this, and finally we can see the animated dot spinner rolling at the center of the canvas 16. Project3 - Gear Animation: in this video, we will brief you how to make gear SVG animation. For this we have already made a design in Illustrator. This is great here and this is black gear. It will rotate clockwise direction and black gear will rotate in an anti clockwise direction. We have exported both gear in SPG format. Here we can see, two files has been published. We have imported this into Google Web designer as a static SVG image. We can see it here. The image tag of spg file. Also, we have wrapped both images into a single Dave click on the body and we can see now and within this both image file has been placed. After this, it is animated for five seconds, a key frame of 5th 2nd we have to put 360 degree, it said Axis of rotation section and in black gear. We have to put minus 360 degree so that it can rotate in an anti clockwise direction. Also, we have changed some CSS class named by going through CSS panel as a single HTML five file . So this is overall process to create this gear animation. Thanks for joining me for this training program.