{"id":1620,"date":"2018-03-03T00:40:44","date_gmt":"2018-03-03T00:40:44","guid":{"rendered":"http:\/\/thingography.com\/?p=1620"},"modified":"2018-11-06T14:24:49","modified_gmt":"2018-11-06T14:24:49","slug":"css-loaders","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-loaders\/","title":{"rendered":"Loaders &#8211; Pure CSS  Animation"},"content":{"rendered":"<style>\n#container-1 {\n\twidth: 500px;\n\theight: 400px;\n\tmargin: 0px auto 0px auto;\n\tbackground-color: #fff;\n\tposition: relative;\n\ttop: 25px;\n}\n.example-1, .example-2, .example-3 {\n\tmargin: 60px auto 60px auto;\n\twidth: 550px;\n\theight: 450px;\n\tposition: relative;\n\tbackground-color: #E7E7E7;\n}\n.example-2, .example-3 {\n\twidth: 500px;\n\theight: 500px;\n}\n#last {\n\tmargin-bottom: 80px;\n}\n\/*  ============= Start Example - ONE =========== *\/\n.outer-disk-red, .outer-disk-red2, .outer-disk-red3, .outer-disk-red4, .outer-disk-blue, .outer-disk-blue2, .outer-disk-blue3, .outer-disk-blue4, .outer-disk-yellow, .outer-disk-yellow2, .outer-disk-yellow3, .outer-disk-yellow4, .outer-disk-yellow5, .outer-disk-green, .outer-disk-green2, .outer-disk-green3, .outer-disk-green4, .outer-disk-key  {\n\tmargin: -25px 0px 0px -25px;\n\tborder: 1px solid #000000;\n\twidth: 23px;\n\theight: 23px;\n\tposition: absolute;\n\tbackground-color: #0000FF;\n}\n.outer-disk-red, .outer-disk-red2, .outer-disk-red3, .outer-disk-red4 {\n\tbackground-color: #FF0000;\n\tanimation: outer-disk-red 5s linear infinite;\n}\n.outer-disk-red2 {animation-delay:2.4s;}\n.outer-disk-red3 {animation-delay:4.8s;}\n.outer-disk-red4 {animation-delay:7.2s;}<\/p>\n<p>.outer-disk-blue, .outer-disk-blue2, .outer-disk-blue3, .outer-disk-blue4 {\n\tbackground-color: #0000FF;\n\tanimation: outer-disk-red 5s linear infinite;\n\tanimation-delay:0.6s;\n}\n.outer-disk-blue2 {animation-delay:3.0s;}\n.outer-disk-blue3 {animation-delay:5.4s;}\n.outer-disk-blue4 {animation-delay:7.8s;}<\/p>\n<p>.outer-disk-yellow, .outer-disk-yellow2, .outer-disk-yellow3, .outer-disk-yellow4, .outer-disk-yellow5 {\n\tbackground-color: #FFFF00;\n\tanimation: outer-disk-red 5s linear infinite;\n\tanimation-delay:1.2s;\n}\n.outer-disk-yellow2 {animation-delay:3.6s;}\n.outer-disk-yellow3 {animation-delay:6.0s;}\n.outer-disk-yellow4 {animation-delay:8.4s;}\n.outer-disk-yellow5 {animation-delay:9.5s;}\n.outer-disk-green, .outer-disk-green2, .outer-disk-green3, .outer-disk-green4 {\n\tbackground-color: #009900;\n\tanimation: outer-disk-red 5s linear infinite;\n\tanimation-delay: 1.8s;\n}\n.outer-disk-green2 {animation-delay:4.2s;}\n.outer-disk-green3 {animation-delay:6.6s;}\n.outer-disk-green4 {animation-delay:9.0s;}\n@keyframes outer-disk-red { \n0%   {transform: translate(  0px,  0px); border-radius: 50%;}\n25%  {transform: translate(525px,  0px); border-radius: 50%;}\n50%  {transform: translate(525px,425px); border-radius: 50%;}\n75%  {transform: translate(  0px,425px); border-radius:  0%;}\n100% {transform: translate(  0px,  0px); border-radius:  0%;}\n} \n\/* ==========  Start Example - TWO  =========== *\/\n#container-2 {\n\twidth: 500px;\n\theight: 500px;\n\tmargin: 0px auto 0px auto;\n\tbackground-color: #EFEFEF;\n\tposition: relative;\n\ttop: 0px;\n\tbox-shadow: 0 0 25px 10px #000000;\n}\n.disk-green, .disk-red, .disk-blue, .disk-yellow, .disk-green2, .disk-red2, .disk-blue2, .disk-yellow2, \n.disk-green3, .disk-red3, .disk-blue3, .disk-yellow3, .disk-green4, .disk-red4, .disk-blue4, .disk-yellow4, .disk-green5, .disk-red5, .disk-blue5, .disk-yellow5, .disk-green6, .disk-red6, .disk-blue6, .disk-yellow6  {\n\tborder: 1px solid #000000;\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tbackground-color: #0000FF;\n\tbox-shadow: 0 0 10px 1px #000000;\n}\n.disk-red, .disk-red2, .disk-red3, .disk-red4, .disk-red5, .disk-red6{\n\tbackground-color: #FF0000;\n\tanimation: disk-red 2.5s linear infinite;\n}\n.disk-red2 {animation: disk-red 5.0s linear infinite;}\n.disk-red3 {animation: disk-red 7.5s linear infinite;}\n.disk-red4 {animation: disk-red 10s linear infinite;}\n.disk-red5 {animation: disk-red 15s linear infinite;}\n.disk-red6 {animation: disk-red 20s linear infinite;}\n.disk-blue, .disk-blue2, .disk-blue3, .disk-blue4, .disk-blue5, .disk-blue6 {\n\tbackground-color: #0000FF;\n\tanimation: disk-blue 2.5s linear infinite;\n}\n.disk-blue2 {animation: disk-blue 5.0s linear infinite;}\n.disk-blue3 {animation: disk-blue 7.5s linear infinite;}\n.disk-blue4 {animation: disk-blue 10s linear infinite;}\n.disk-blue5 {animation: disk-blue 15s linear infinite;}\n.disk-blue6 {animation: disk-blue 20s linear infinite;}\n.disk-yellow, .disk-yellow2, .disk-yellow3, .disk-yellow4, .disk-yellow5, .disk-yellow6{\n\tbackground-color: #FFFF00;\n\tanimation: disk-yellow 2.5s linear infinite;\n}\n.disk-yellow2 {animation: disk-yellow 5.0s linear infinite;}\n.disk-yellow3 {animation: disk-yellow 7.5s linear infinite;}\n.disk-yellow4 {animation: disk-yellow 10s linear infinite;}\n.disk-yellow5 {animation: disk-yellow 15s linear infinite;}\n.disk-yellow6 {animation: disk-yellow 20s linear infinite;}\n.disk-green, .disk-green2, .disk-green3, .disk-green4, .disk-green5, .disk-green6{\n\tbackground-color: #009900;\n\tanimation: disk-green 2.5s linear infinite;\n}\n.disk-green2 {animation: disk-green 5.0s linear infinite;}\n.disk-green3 {animation: disk-green 7.5s linear infinite;}\n.disk-green4 {animation: disk-green 10s linear infinite;}\n.disk-green5 {animation: disk-green 15s linear infinite;}\n.disk-green6 {animation: disk-green 20s linear infinite;}\n@keyframes disk-red {\n0%   {transform: translate(  0px,  0px);}\n50%  {transform: translate(475px,475px);}\n100% {transform: translate(  0px,  0px);}\n} \n@keyframes disk-blue {\n0%   {transform: translate( 475px,  0px);}\n50%  {transform: translate(   0px,475px);}\n100% {transform: translate( 475px,  0px);}\n} \n@keyframes disk-yellow {\n0%   {transform: translate(  0px,475px);}\n50%  {transform: translate(475px,  0px);}\n100% {transform: translate(  0px,475px);}\n} \n@keyframes disk-green {\n0%   {transform: translate(475px, 475px);}\n50%  {transform: translate(   0px,  0px);}\n100% {transform: translate(475px, 475px);}\n} \n\/* ==========  Start Example - THREE  =========== *\/\n#container-3 {\n\twidth: 500px;\n\theight: 500px;\n\tmargin: 0px auto 0px auto;\n\tbackground-color: #EFEFEF;\n\tposition: relative;\n}\n.green1, .red1, .blue1, .yellow1, .green2, .red2, .blue2, .yellow2, \n.green3, .red3, .blue3, .yellow3, .green4, .red4, .blue4, .yellow4  {\n\tborder: 4px solid #000000;\n\twidth: 46px;\n\theight: 46px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tbackground-color: #0000FF;\n\tbox-shadow: 0 0 20px 1px #000000;\n}\n.red1, .red2, .red3, .red4 {\n\tbackground-color: #FF0000;\n\tanimation: red 10s linear infinite;\n}\n.red2 {animation-delay: 1s;}\n.red3 {animation-delay: 2s;}\n.red4 {animation-delay: 3s;}\n.blue1, .blue2, .blue3, .blue4 {\n\tbackground-color: #FF0000;\n\tanimation: blue 10s linear infinite;\n}\n.blue2 {animation-delay: 1s;}\n.blue3 {animation-delay: 2s;}\n.blue4 {animation-delay: 3s;}\n.yellow1, .yellow2, .yellow3, .yellow4 {\n\tbackground-color: #FF0000;\n\tanimation: yellow 10s linear infinite;\n}\n.yellow2 {animation-delay: 1s;}\n.yellow3 {animation-delay: 2s;}\n.yellow4 {animation-delay: 3s;}\n.green1, .green2, .green3, .green4 {\n\tbackground-color: #FF0000;\n\tanimation: green 10s linear infinite;\n}\n.green2 {animation-delay: 1s;}\n.green3 {animation-delay: 2s;}\n.green4 {animation-delay: 3s;}\n@keyframes red {\n0%   {transform: translate(  0px,  0px);}\n100% {transform: translate(450px,450px);}\n} \n@keyframes blue {\n0%   {transform: translate(450px,  0px);}\n100% {transform: translate(  0px,450px);}\n} \n@keyframes yellow {\n0%   {transform: translate(  0px,450px);}\n100% {transform: translate(450px,  0px);}\n} \n@keyframes green {\n0%   {transform: translate(450px, 450px);}\n100% {transform: translate(  0px,  0px);}\n}\n@media screen and (max-width: 720px) {\n    .example-1, .example-2, .example-3 {\n        transform: scale(0.7);\n        transform-origin: center top;\n    }\n}\n@media screen and (max-width: 480px) {\n    .example-1, .example-2, .example-3 {\n        transform: scale(0.4);\n        transform-origin: center top;\nleft: -15%;\n    }\n}\n<\/style>\n<div class=\"below-ani\"> Three animation examples that can have multiple uses. This type of animation can be used for loaders and more. <\/div>\n<div class=\"example-1\">\n<div id=\"container-1\">\n<div class=\"outer-disk-red\"><\/div>\n<div class=\"outer-disk-red2\"><\/div>\n<div class=\"outer-disk-red3\"><\/div>\n<div class=\"outer-disk-red4\"><\/div>\n<div class=\"outer-disk-blue\"><\/div>\n<div class=\"outer-disk-blue2\"><\/div>\n<div class=\"outer-disk-blue3\"><\/div>\n<div class=\"outer-disk-blue4\"><\/div>\n<div class=\"outer-disk-yellow\"><\/div>\n<div class=\"outer-disk-yellow2\"><\/div>\n<div class=\"outer-disk-yellow3\"><\/div>\n<div class=\"outer-disk-yellow4\"><\/div>\n<div class=\"outer-disk-green\"><\/div>\n<div class=\"outer-disk-green2\"><\/div>\n<div class=\"outer-disk-green3\"><\/div>\n<div class=\"outer-disk-green4\"><\/div>\n<div class=\"outer-disk-yellow5\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"below-ani\"> In the first example, the circulating colors can be used as a image or text highlighter.  Variations in shape, color, speed and size can result in dozens of unique appearances.<\/div>\n<div class=\"example-2\">\n<div id=\"container-2\">\n<div class=\"disk-red\"><\/div>\n<div class=\"disk-blue\"><\/div>\n<div class=\"disk-yellow\"><\/div>\n<div class=\"disk-green\"><\/div>\n<div class=\"disk-red2\"><\/div>\n<div class=\"disk-blue2\"><\/div>\n<div class=\"disk-yellow2\"><\/div>\n<div class=\"disk-green2\"><\/div>\n<div class=\"disk-red3\"><\/div>\n<div class=\"disk-blue3\"><\/div>\n<div class=\"disk-yellow3\"><\/div>\n<div class=\"disk-green3\"><\/div>\n<div class=\"disk-red4\"><\/div>\n<div class=\"disk-blue4\"><\/div>\n<div class=\"disk-yellow4\"><\/div>\n<div class=\"disk-green4\"><\/div>\n<div class=\"disk-red5\"><\/div>\n<div class=\"disk-blue5\"><\/div>\n<div class=\"disk-yellow5\"><\/div>\n<div class=\"disk-green5\"><\/div>\n<div class=\"disk-red6\"><\/div>\n<div class=\"disk-blue6\"><\/div>\n<div class=\"disk-yellow6\"><\/div>\n<div class=\"disk-green6\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"below-ani\"> In this example, which appears more like a loader than the others, the balls can be manipulated into many other variations such as the third example.<\/div>\n<div class=\"example-3\">\n<div id=\"container-3\">\n<div class=\"red1\"><\/div>\n<div class=\"blue1\"><\/div>\n<div class=\"yellow1\"><\/div>\n<div class=\"green1\"><\/div>\n<div class=\"red2\"><\/div>\n<div class=\"blue2\"><\/div>\n<div class=\"yellow2\"><\/div>\n<div class=\"green2\"><\/div>\n<div class=\"red3\"><\/div>\n<div class=\"blue3\"><\/div>\n<div class=\"yellow3\"><\/div>\n<div class=\"green3\"><\/div>\n<div class=\"red4\"><\/div>\n<div class=\"blue4\"><\/div>\n<div class=\"yellow4\"><\/div>\n<div class=\"green4\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"below-ani\"> Nicknamed the &#8216;Caterpillar&#8217;, this animation can manipulated to resemble a worm or snake, as well as another loader.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Three animation examples that can have multiple uses. This type of animation can be used for loaders and more. In the first example, the circulating colors can be used as a image or text highlighter. Variations in shape, color, speed<\/p>\n","protected":false},"author":2,"featured_media":2593,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,174],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1620"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=1620"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1620\/revisions"}],"predecessor-version":[{"id":2638,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1620\/revisions\/2638"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2593"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}