ffaezffaez1267
Humor Alchemist
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Good Day!!!
In this tutorial, we are going to learn How To Make Loading Effect Using CSS3. Mostly loading effect is created through Flash Software, but now with the power of CSS we can make the effect even if we will not use the Flash Software.
For this project, you can change any color you want for the loading effect. CSS is now powerfull in terms of animation for your project because you can customize it easily.
Directions:
For CSS - Design and Effect
For HTML Code
For Source Code
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
In this tutorial, we are going to learn How To Make Loading Effect Using CSS3. Mostly loading effect is created through Flash Software, but now with the power of CSS we can make the effect even if we will not use the Flash Software.
For this project, you can change any color you want for the loading effect. CSS is now powerfull in terms of animation for your project because you can customize it easily.
Directions:
For CSS - Design and Effect
- .loading_style
span {
- display
:
inline-block
;
- vertical-align
:
middle
;
- width
:
10px
;
- height
:
10px
;
- margin
:
50px
auto
;
- background
:
#ff0000
;
- border-radius
:
5px
;
- -webkit-animation:
loading_style 0.9s
infinite
alternate
;
- -moz-animation:
loading_style 0.9s
infinite
alternate
;
- box-shadow
:
1px
1px
1px
#444444
;
- }
- .loading_style
span:
nth-of-type
(
2
)
{
- background
:
#ff0000
;
- -webkit-animation-delay:
0.2s
;
- -moz-animation-delay:
0.2s
;
- }
- .loading_style
span:
nth-of-type
(
3
)
{
- background
:
#ff0000
;
- -webkit-animation-delay:
0.4s
;
- -moz-animation-delay:
0.4s
;
- }
- .loading_style
span:
nth-of-type
(
4
)
{
- background
:
#ff0000
;
- -webkit-animation-delay:
0.6s
;
- -moz-animation-delay:
0.6s
;
- }
- .loading_style
span:
nth-of-type
(
5
)
{
- background
:
#ff0000
;
- -webkit-animation-delay:
0.8s
;
- -moz-animation-delay:
0.8s
;
- }
- @-webkit-keyframes
loading_style {
- 0%
{
- width
:
10px
;
- height
:
10px
;
- -webkit-transform:
translateZ(
0
)
;
- }
- 100%
{
- width
:
24px
;
- height
:
24px
;
- -webkit-transform:
translateZ(
-21px
)
;
- }
- }
- @-moz-keyframes
loading_style {
- 0%
{
- width
:
10px
;
- height
:
10px
;
- -moz-transform:
translateZ(
0
)
;
- }
- 100%
{
- width
:
24px
;
- height
:
24px
;
- -moz-transform:
translateZ(
-21px
)
;
- }
- }
For HTML Code
- <table
>
- <tr
>
- <td
>
- <div
class
=
"loading_style"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- <td
width
=
"50"
>
- </
td
>
- <td
>
- <div
class
=
"loading_style2"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- <td
width
=
"50"
>
- </
td
>
- <td
>
- <div
class
=
"loading_style3"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- </
tr
>
- </
table
>
For Source Code
- <!DOCTYPE html>
- <html
>
- <head
>
- <title
>
CSS3 Loading Animation</
title
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style2.css"
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style3.css"
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style4.css"
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style5.css"
>
- </
head
>
- <body
>
- <table
>
- <tr
>
- <td
>
- <div
class
=
"loading_style"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- <td
width
=
"50"
>
- </
td
>
- <td
>
- <div
class
=
"loading_style2"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- <td
width
=
"50"
>
- </
td
>
- <td
>
- <div
class
=
"loading_style3"
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- <span
></
span
>
- </
div
>
- </
td
>
- </
tr
>
- </
table
>
- </
body
>
- </
html
>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you.
Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.
Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.
FOR YOUR OWN SAFETY, PLEASE:
1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.
Download
You must upgrade your account or reply in the thread to view hidden text.