{"id":2273,"date":"2015-01-09T07:43:40","date_gmt":"2015-01-09T07:43:40","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2273"},"modified":"2015-05-10T07:30:53","modified_gmt":"2015-05-10T07:30:53","slug":"loading-animation-using-css3-code-with-example","status":"publish","type":"post","link":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/","title":{"rendered":"Loading animation using CSS3 code with example"},"content":{"rendered":"

This is a post on our lab which contain how to make loading animations using CSS. It uses CSS3 keyframes feature for making animation. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code and after that there is also option for viewing live demo of this tutorial.<\/p>\n

CSS<\/h2>\n
\r\n\r\n\t#loading-1, #loading-2, #loading-3{\r\n\t\tfloat:left;\r\n\t\twidth: 130px;\r\n\t\theight: 130px;\r\n\t\tmargin:60px 0;\r\n\t}\t\r\n\t#loading-1 {\r\n\t\tbackground: url('images\/spinner1-130x130.png');\r\n\t}\r\n\t#loading-2 {\r\n\t\tbackground: url('images\/spinner2-130x130.png');\r\n\t}\r\n\t#loading-3 {\r\n\t\tbackground: url('images\/spinner3-130x130.png');\r\n\t}\r\n\t@keyframes rotating {\r\n\t  from {\r\n\t\ttransform: rotate(0deg);\r\n\t\t-ms-transform: rotate(0deg);\r\n\t\t-moz-transform: rotate(0deg);\r\n\t\t-webkit-transform: rotate(0deg);\r\n\t\t-o-transform: rotate(0deg);\r\n\t  }\r\n\t  to {\r\n\t\ttransform: rotate(360deg);\r\n\t\t-ms-transform: rotate(360deg);\r\n\t\t-moz-transform: rotate(360deg);\r\n\t\t-webkit-transform: rotate(360deg);\r\n\t\t-o-transform: rotate(360deg);\r\n\t  }\r\n\t}\r\n\t@-webkit-keyframes rotating \/* Safari and Chrome *\/ {\r\n\t  from {\r\n\t\ttransform: rotate(0deg);\r\n\t\t-ms-transform: rotate(0deg);\r\n\t\t-moz-transform: rotate(0deg);\r\n\t\t-webkit-transform: rotate(0deg);\r\n\t\t-o-transform: rotate(0deg);\r\n\t  }\r\n\t  to {\r\n\t\ttransform: rotate(360deg);\r\n\t\t-ms-transform: rotate(360deg);\r\n\t\t-moz-transform: rotate(360deg);\r\n\t\t-webkit-transform: rotate(360deg);\r\n\t\t-o-transform: rotate(360deg);\r\n\t  }\r\n\t}\r\n\t.speed1 {\r\n\t\t-webkit-animation: rotating 2s linear infinite;\r\n\t\t-moz-animation: rotating 2s linear infinite;\r\n\t\t-ms-animation: rotating 2s linear infinite;\r\n\t\t-o-animation: rotating 2s linear infinite;\r\n\t\tanimation: rotating 2s linear infinite;\r\n\t}\t\r\n\t.speed2 {\r\n\t\t-webkit-animation: rotating 5s linear infinite;\r\n\t\t-moz-animation: rotating 5s linear infinite;\r\n\t\t-ms-animation: rotating 5s linear infinite;\r\n\t\t-o-animation: rotating 5s linear infinite;\r\n\t\tanimation: rotating 5s linear infinite;\r\n\t}\t\r\n\t.speed3 {\r\n\t\t-webkit-animation: rotating 8s linear infinite;\r\n\t\t-moz-animation: rotating 8s linear infinite;\r\n\t\t-ms-animation: rotating 8s linear infinite;\r\n\t\t-o-animation: rotating 8s linear infinite;\r\n\t\tanimation: rotating 8s linear infinite;\r\n\t}\t\r\n\r\n<\/pre>\n
HTML<\/h2>\n
\r\n\r\n\t\t\t
\r\n\r\n\t\t\t\t
<\/div>\r\n\t\t\t\t
<\/div>\r\n\t\t\t\t
<\/div>\r\n\t\t\t\r\n\t\t\t<\/div>\t\r\n\r\n<\/pre>\n
Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
This is a post on our lab which contain how to make loading animations using CSS. It uses CSS3 keyframes feature for making animation. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code […]<\/p>\n","protected":false},"author":1,"featured_media":2594,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[72,67,101,94],"yoast_head":"\nLoading animation using CSS3 code with example - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Loading animation using CSS3 code with example - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"This is a post on our lab which contain how to make loading animations using CSS. It uses CSS3 keyframes feature for making animation. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-09T07:43:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-10T07:30:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/01\/loading-ani400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Loading animation using CSS3 code with example\",\"datePublished\":\"2015-01-09T07:43:40+00:00\",\"dateModified\":\"2015-05-10T07:30:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\"},\"wordCount\":80,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"Code Library\",\"CSS\",\"Examples\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\",\"name\":\"Loading animation using CSS3 code with example - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2015-01-09T07:43:40+00:00\",\"dateModified\":\"2015-05-10T07:30:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Loading animation using CSS3 code with example\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"https:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Loading animation using CSS3 code with example - Vishmax.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/","og_locale":"en_US","og_type":"article","og_title":"Loading animation using CSS3 code with example - Vishmax.com","og_description":"This is a post on our lab which contain how to make loading animations using CSS. It uses CSS3 keyframes feature for making animation. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code […]","og_url":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/","og_site_name":"Vishmax.com","article_published_time":"2015-01-09T07:43:40+00:00","article_modified_time":"2015-05-10T07:30:53+00:00","og_image":[{"width":400,"height":230,"url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2015\/01\/loading-ani400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#article","isPartOf":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Loading animation using CSS3 code with example","datePublished":"2015-01-09T07:43:40+00:00","dateModified":"2015-05-10T07:30:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/"},"wordCount":80,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["Code Library","CSS","Examples","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/","url":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/","name":"Loading animation using CSS3 code with example - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2015-01-09T07:43:40+00:00","dateModified":"2015-05-10T07:30:53+00:00","breadcrumb":{"@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vishmax.com\/en\/labs\/loading-animation-using-css3-code-with-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Loading animation using CSS3 code with example"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"https:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2273"}],"collection":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2273"}],"version-history":[{"count":0,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2594"}],"wp:attachment":[{"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}