loaders – Thingography.com https://thingography.com More than a Photo Gallery Tue, 06 Nov 2018 14:24:49 +0000 en-US hourly 1 Loaders – Pure CSS Animation https://thingography.com/css-loaders/ https://thingography.com/css-loaders/#respond Sat, 03 Mar 2018 00:40:44 +0000 http://thingography.com/?p=1620 #container-1 { width: 500px; height: 400px; margin: 0px auto 0px auto; background-color: #fff; position: relative; top: 25px; } .example-1, .example-2, .example-3 { margin: 60px auto 60px auto; width: 550px; height: 450px; position: relative; background-color: #E7E7E7; } .example-2, .example-3 { width: 500px; height: 500px; } #last { margin-bottom: 80px; } /* ============= Start Example - ONE =========== */ .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 { margin: -25px 0px 0px -25px; border: 1px solid #000000; width: 23px; height: 23px; position: absolute; background-color: #0000FF; } .outer-disk-red, .outer-disk-red2, .outer-disk-red3, .outer-disk-red4 { background-color: #FF0000; animation: outer-disk-red 5s linear infinite; } .outer-disk-red2 {animation-delay:2.4s;} .outer-disk-red3 {animation-delay:4.8s;} .outer-disk-red4 {animation-delay:7.2s;}

.outer-disk-blue, .outer-disk-blue2, .outer-disk-blue3, .outer-disk-blue4 { background-color: #0000FF; animation: outer-disk-red 5s linear infinite; animation-delay:0.6s; } .outer-disk-blue2 {animation-delay:3.0s;} .outer-disk-blue3 {animation-delay:5.4s;} .outer-disk-blue4 {animation-delay:7.8s;}

.outer-disk-yellow, .outer-disk-yellow2, .outer-disk-yellow3, .outer-disk-yellow4, .outer-disk-yellow5 { background-color: #FFFF00; animation: outer-disk-red 5s linear infinite; animation-delay:1.2s; } .outer-disk-yellow2 {animation-delay:3.6s;} .outer-disk-yellow3 {animation-delay:6.0s;} .outer-disk-yellow4 {animation-delay:8.4s;} .outer-disk-yellow5 {animation-delay:9.5s;} .outer-disk-green, .outer-disk-green2, .outer-disk-green3, .outer-disk-green4 { background-color: #009900; animation: outer-disk-red 5s linear infinite; animation-delay: 1.8s; } .outer-disk-green2 {animation-delay:4.2s;} .outer-disk-green3 {animation-delay:6.6s;} .outer-disk-green4 {animation-delay:9.0s;} @keyframes outer-disk-red { 0% {transform: translate( 0px, 0px); border-radius: 50%;} 25% {transform: translate(525px, 0px); border-radius: 50%;} 50% {transform: translate(525px,425px); border-radius: 50%;} 75% {transform: translate( 0px,425px); border-radius: 0%;} 100% {transform: translate( 0px, 0px); border-radius: 0%;} } /* ========== Start Example - TWO =========== */ #container-2 { width: 500px; height: 500px; margin: 0px auto 0px auto; background-color: #EFEFEF; position: relative; top: 0px; box-shadow: 0 0 25px 10px #000000; } .disk-green, .disk-red, .disk-blue, .disk-yellow, .disk-green2, .disk-red2, .disk-blue2, .disk-yellow2, .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 { border: 1px solid #000000; width: 24px; height: 24px; border-radius: 50%; position: absolute; background-color: #0000FF; box-shadow: 0 0 10px 1px #000000; } .disk-red, .disk-red2, .disk-red3, .disk-red4, .disk-red5, .disk-red6{ background-color: #FF0000; animation: disk-red 2.5s linear infinite; } .disk-red2 {animation: disk-red 5.0s linear infinite;} .disk-red3 {animation: disk-red 7.5s linear infinite;} .disk-red4 {animation: disk-red 10s linear infinite;} .disk-red5 {animation: disk-red 15s linear infinite;} .disk-red6 {animation: disk-red 20s linear infinite;} .disk-blue, .disk-blue2, .disk-blue3, .disk-blue4, .disk-blue5, .disk-blue6 { background-color: #0000FF; animation: disk-blue 2.5s linear infinite; } .disk-blue2 {animation: disk-blue 5.0s linear infinite;} .disk-blue3 {animation: disk-blue 7.5s linear infinite;} .disk-blue4 {animation: disk-blue 10s linear infinite;} .disk-blue5 {animation: disk-blue 15s linear infinite;} .disk-blue6 {animation: disk-blue 20s linear infinite;} .disk-yellow, .disk-yellow2, .disk-yellow3, .disk-yellow4, .disk-yellow5, .disk-yellow6{ background-color: #FFFF00; animation: disk-yellow 2.5s linear infinite; } .disk-yellow2 {animation: disk-yellow 5.0s linear infinite;} .disk-yellow3 {animation: disk-yellow 7.5s linear infinite;} .disk-yellow4 {animation: disk-yellow 10s linear infinite;} .disk-yellow5 {animation: disk-yellow 15s linear infinite;} .disk-yellow6 {animation: disk-yellow 20s linear infinite;} .disk-green, .disk-green2, .disk-green3, .disk-green4, .disk-green5, .disk-green6{ background-color: #009900; animation: disk-green 2.5s linear infinite; } .disk-green2 {animation: disk-green 5.0s linear infinite;} .disk-green3 {animation: disk-green 7.5s linear infinite;} .disk-green4 {animation: disk-green 10s linear infinite;} .disk-green5 {animation: disk-green 15s linear infinite;} .disk-green6 {animation: disk-green 20s linear infinite;} @keyframes disk-red { 0% {transform: translate( 0px, 0px);} 50% {transform: translate(475px,475px);} 100% {transform: translate( 0px, 0px);} } @keyframes disk-blue { 0% {transform: translate( 475px, 0px);} 50% {transform: translate( 0px,475px);} 100% {transform: translate( 475px, 0px);} } @keyframes disk-yellow { 0% {transform: translate( 0px,475px);} 50% {transform: translate(475px, 0px);} 100% {transform: translate( 0px,475px);} } @keyframes disk-green { 0% {transform: translate(475px, 475px);} 50% {transform: translate( 0px, 0px);} 100% {transform: translate(475px, 475px);} } /* ========== Start Example - THREE =========== */ #container-3 { width: 500px; height: 500px; margin: 0px auto 0px auto; background-color: #EFEFEF; position: relative; } .green1, .red1, .blue1, .yellow1, .green2, .red2, .blue2, .yellow2, .green3, .red3, .blue3, .yellow3, .green4, .red4, .blue4, .yellow4 { border: 4px solid #000000; width: 46px; height: 46px; border-radius: 50%; position: absolute; background-color: #0000FF; box-shadow: 0 0 20px 1px #000000; } .red1, .red2, .red3, .red4 { background-color: #FF0000; animation: red 10s linear infinite; } .red2 {animation-delay: 1s;} .red3 {animation-delay: 2s;} .red4 {animation-delay: 3s;} .blue1, .blue2, .blue3, .blue4 { background-color: #FF0000; animation: blue 10s linear infinite; } .blue2 {animation-delay: 1s;} .blue3 {animation-delay: 2s;} .blue4 {animation-delay: 3s;} .yellow1, .yellow2, .yellow3, .yellow4 { background-color: #FF0000; animation: yellow 10s linear infinite; } .yellow2 {animation-delay: 1s;} .yellow3 {animation-delay: 2s;} .yellow4 {animation-delay: 3s;} .green1, .green2, .green3, .green4 { background-color: #FF0000; animation: green 10s linear infinite; } .green2 {animation-delay: 1s;} .green3 {animation-delay: 2s;} .green4 {animation-delay: 3s;} @keyframes red { 0% {transform: translate( 0px, 0px);} 100% {transform: translate(450px,450px);} } @keyframes blue { 0% {transform: translate(450px, 0px);} 100% {transform: translate( 0px,450px);} } @keyframes yellow { 0% {transform: translate( 0px,450px);} 100% {transform: translate(450px, 0px);} } @keyframes green { 0% {transform: translate(450px, 450px);} 100% {transform: translate( 0px, 0px);} } @media screen and (max-width: 720px) { .example-1, .example-2, .example-3 { transform: scale(0.7); transform-origin: center top; } } @media screen and (max-width: 480px) { .example-1, .example-2, .example-3 { transform: scale(0.4); transform-origin: center top; left: -15%; } }

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 and size can result in dozens of unique appearances.

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.

Nicknamed the ‘Caterpillar’, this animation can manipulated to resemble a worm or snake, as well as another loader.
]]> https://thingography.com/css-loaders/feed/ 0