Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Pre loader using pure css

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 343
    Comment on it

    Hi All,

    Below is some example of pure css loader. Using css animation. All are single element loader.

    Please, check the below code for details.

    1. section{
    2.   margin: 10px 0;
    3. }
    4. .loader {
    5.   position: absolute;
    6.   z-index: 1;
    7.   left: 0;
    8.   right: 0;
    9.   margin: 0 auto; 
    10. }
    11.  
    12.  
    13. .loader-1 {
    14.   height: 100px;
    15. }
    16. .loader-1 .loader {
    17.   width: 100px;
    18.   height: 100px;
    19.   background-color: #03445d;
    20.   -webkit-border-radius: 100%;
    21.   -moz-border-radius: 100%;
    22.   -ms-border-radius: 100%;
    23.   -o-border-radius: 100%;
    24.   border-radius: 100%;
    25. }
    26. .loader-1 .loader:before {
    27.   display: block;
    28.   position: absolute;
    29.   z-index: 2;
    30.   left: 0;
    31.   right: 0;
    32.   top: 10px;
    33.   margin: 0 auto;
    34.   width: 20px;
    35.   height: 20px;
    36.   background-color: #7c7803;
    37.   content: "";
    38.   -webkit-border-radius: 20px;
    39.   -moz-border-radius: 20px;
    40.   -ms-border-radius: 20px;
    41.   -o-border-radius: 20px;
    42.   border-radius: 20px;
    43.   -webkit-transform-origin: 10px 40px;
    44.   -moz-transform-origin: 10px 40px;
    45.   -ms-transform-origin: 10px 40px;
    46.   -o-transform-origin: 10px 40px;
    47.   transform-origin: 10px 40px;
    48.   -webkit-animation: loader-1 1s infinite linear;
    49.   -moz-animation: loader-1 1s infinite linear;
    50.   -ms-animation: loader-1 1s infinite linear;
    51.   -o-animation: loader-1 1s infinite linear;
    52.   animation: loader-1 1s infinite linear;
    53. }
    54.  
    55. @-webkit-keyframes loader-1 {
    56.   from {
    57.     -webkit-transform: rotate(0deg);
    58.   }
    59.  
    60.   to {
    61.     -webkit-transform: rotate(360deg);
    62.   }
    63. }
    64.  
    65. @-moz-keyframes loader-1 {
    66.   from {
    67.     -moz-transform: rotate(0deg);
    68.   }
    69.  
    70.   to {
    71.     -moz-transform: rotate(360deg);
    72.   }
    73. }
    74.  
    75. @-ms-keyframes loader-1 {
    76.   from {
    77.     -ms-transform: rotate(0deg);
    78.   }
    79.  
    80.   to {
    81.     -ms-transform: rotate(360deg);
    82.   }
    83. }
    84.  
    85. @-o-keyframes loader-1 {
    86.   from {
    87.     -o-transform: rotate(0deg);
    88.   }
    89.  
    90.   to {
    91.     -o-transform: rotate(360deg);
    92.   }
    93. }
    94.  
    95. @keyframes loader-1 {
    96.   from {
    97.     transform: rotate(0deg);
    98.   }
    99.  
    100.   to {
    101.     transform: rotate(360deg);
    102.   }
    103. }
    104.  
    105. /* ============================================================
    106.   loader 2
    107. ============================================================ */
    108. .loader-2 {
    109.   height: 100px;
    110. }
    111. .loader-2 .loader {
    112.   width: 100px;
    113.   height: 100px;
    114. }
    115. .loader-2 .loader:before {
    116.   display: block;
    117.   position: absolute;
    118.   top: 0;
    119.   bottom: 0;
    120.   right: 0;
    121.   left: 0;
    122.   border-top: solid 20px #7c7803;
    123.   border-bottom: solid 20px #7c7803;
    124.   border-left: solid 20px transparent;
    125.   border-right: solid 20px transparent;
    126.   content: "";
    127.   -webkit-border-radius: 50px;
    128.   -moz-border-radius: 50px;
    129.   -ms-border-radius: 50px;
    130.   -o-border-radius: 50px;
    131.   border-radius: 50px;
    132.   -webkit-animation: loader-2 1s infinite ease;
    133.   -moz-animation: loader-2 1s infinite ease;
    134.   -ms-animation: loader-2 1s infinite ease;
    135.   -o-animation: loader-2 1s infinite ease;
    136.   animation: loader-2 1s infinite ease;
    137. }
    138. .loader-2 .loader:after {
    139.   display: block;
    140.   position: absolute;
    141.   top: 0;
    142.   bottom: 0;
    143.   right: 0;
    144.   left: 0;
    145.   margin: auto;
    146.   width: 40px;
    147.   height: 40px;
    148.   background-color: #03445d;
    149.   content: "";
    150.   -webkit-border-radius: 20px;
    151.   -moz-border-radius: 20px;
    152.   -ms-border-radius: 20px;
    153.   -o-border-radius: 20px;
    154.   border-radius: 20px;
    155. }
    156.  
    157. @-webkit-keyframes loader-2 {
    158.   from {
    159.     -webkit-transform: rotate(0deg);
    160.   }
    161.  
    162.   to {
    163.     -webkit-transform: rotate(360deg);
    164.   }
    165. }
    166.  
    167. @-moz-keyframes loader-2 {
    168.   from {
    169.     -moz-transform: rotate(0deg);
    170.   }
    171.  
    172.   to {
    173.     -moz-transform: rotate(360deg);
    174.   }
    175. }
    176.  
    177. @-ms-keyframes loader-2 {
    178.   from {
    179.     -ms-transform: rotate(0deg);
    180.   }
    181.  
    182.   to {
    183.     -ms-transform: rotate(360deg);
    184.   }
    185. }
    186.  
    187. @-o-keyframes loader-2 {
    188.   from {
    189.     -o-transform: rotate(0deg);
    190.   }
    191.  
    192.   to {
    193.     -o-transform: rotate(360deg);
    194.   }
    195. }
    196.  
    197. @keyframes loader-2 {
    198.   from {
    199.     transform: rotate(0deg);
    200.   }
    201.  
    202.   to {
    203.     transform: rotate(360deg);
    204.   }
    205. }
    206.  
    207. /* ============================================================
    208.   loader 3
    209. ============================================================ */
    210. .loader-3 {
    211.   height: 100px;
    212. }
    213. .loader-3 .loader {
    214.   width: 100px;
    215.   height: 100px;
    216. }
    217. .loader-3 .loader:before, .loader-3 .loader:after {
    218.   display: block;
    219.   position: absolute;
    220.   top: 0;
    221.   bottom: 0;
    222.   margin: auto 0;
    223.   width: 40px;
    224.   height: 40px;
    225.   content: "";
    226.   -webkit-border-radius: 20px;
    227.   -moz-border-radius: 20px;
    228.   -ms-border-radius: 20px;
    229.   -o-border-radius: 20px;
    230.   border-radius: 20px;
    231. }
    232. .loader-3 .loader:before {
    233.   left: 0;
    234.   background-color: #03445d;
    235.   -webkit-animation: loader-3-left 1s infinite linear;
    236.   -moz-animation: loader-3-left 1s infinite linear;
    237.   -ms-animation: loader-3-left 1s infinite linear;
    238.   -o-animation: loader-3-left 1s infinite linear;
    239.   animation: loader-3-left 1s infinite linear;
    240. }
    241. .loader-3 .loader:after {
    242.   right: 0;
    243.   background-color: #7c7803;
    244.   -webkit-animation: loader-3-right 1s infinite linear;
    245.   -moz-animation: loader-3-right 1s infinite linear;
    246.   -ms-animation: loader-3-right 1s infinite linear;
    247.   -o-animation: loader-3-right 1s infinite linear;
    248.   animation: loader-3-right 1s infinite linear;
    249. }
    250.  
    251. /* left ball */
    252. @-webkit-keyframes loader-3-left {
    253.   0% {
    254.     -webkit-transform: translate(0, 0);
    255.   }
    256.  
    257.   25% {
    258.     -webkit-transform: translate(30px, 0);
    259.   }
    260.  
    261.   50% {
    262.     -webkit-transform: translate(30px, -30px);
    263.   }
    264.  
    265.   75% {
    266.     -webkit-transform: translate(30px, 0);
    267.   }
    268.  
    269.   100% {
    270.     -webkit-transform: translate(0, 0);
    271.   }
    272. }
    273.  
    274. @-mos-keyframes loader-3-left {
    275.   0% {
    276.     -mos-transform: translate(0, 0);
    277.   }
    278.  
    279.   25% {
    280.     -mos-transform: translate(30px, 0);
    281.   }
    282.  
    283.   50% {
    284.     -mos-transform: translate(30px, -30px);
    285.   }
    286.  
    287.   75% {
    288.     -mos-transform: translate(30px, 0);
    289.   }
    290.  
    291.   100% {
    292.     -mos-transform: translate(0, 0);
    293.   }
    294. }
    295.  
    296. @-ms-keyframes loader-3-left {
    297.   0% {
    298.     -ms-transform: translate(0, 0);
    299.   }
    300.  
    301.   25% {
    302.     -ms-transform: translate(30px, 0);
    303.   }
    304.  
    305.   50% {
    306.     -ms-transform: translate(30px, -30px);
    307.   }
    308.  
    309.   75% {
    310.     -ms-transform: translate(30px, 0);
    311.   }
    312.  
    313.   100% {
    314.     -ms-transform: translate(0, 0);
    315.   }
    316. }
    317.  
    318. @-o-keyframes loader-3-left {
    319.   0% {
    320.     -o-transform: translate(0, 0);
    321.   }
    322.  
    323.   25% {
    324.     -o-transform: translate(30px, 0);
    325.   }
    326.  
    327.   50% {
    328.     -o-transform: translate(30px, -30px);
    329.   }
    330.  
    331.   75% {
    332.     -o-transform: translate(30px, 0);
    333.   }
    334.  
    335.   100% {
    336.     -o-transform: translate(0, 0);
    337.   }
    338. }
    339.  
    340. @keyframes loader-3-left {
    341.   0% {
    342.     transform: translate(0, 0);
    343.   }
    344.  
    345.   25% {
    346.     transform: translate(30px, 0);
    347.   }
    348.  
    349.   50% {
    350.     transform: translate(30px, -30px);
    351.   }
    352.  
    353.   75% {
    354.     transform: translate(30px, 0);
    355.   }
    356.  
    357.   100% {
    358.     transform: translate(0, 0);
    359.   }
    360. }
    361.  
    362. /* right ball */
    363. @-webkit-keyframes loader-3-right {
    364.   0% {
    365.     -webkit-transform: translate(0, 0);
    366.   }
    367.  
    368.   25% {
    369.     -webkit-transform: translate(-30px, 0);
    370.   }
    371.  
    372.   50% {
    373.     -webkit-transform: translate(-30px, 30px);
    374.   }
    375.  
    376.   75% {
    377.     -webkit-transform: translate(-30px, 0);
    378.   }
    379.  
    380.   100% {
    381.     -webkit-transform: translate(0, 0);
    382.   }
    383. }
    384.  
    385. @-moz-keyframes loader-3-right {
    386.   0% {
    387.     -moz-transform: translate(0, 0);
    388.   }
    389.  
    390.   25% {
    391.     -moz-transform: translate(-30px, 0);
    392.   }
    393.  
    394.   50% {
    395.     -moz-transform: translate(-30px, 30px);
    396.   }
    397.  
    398.   75% {
    399.     -moz-transform: translate(-30px, 0);
    400.   }
    401.  
    402.   100% {
    403.     -moz-transform: translate(0, 0);
    404.   }
    405. }
    406.  
    407. @-ms-keyframes loader-3-right {
    408.   0% {
    409.     -ms-transform: translate(0, 0);
    410.   }
    411.  
    412.   25% {
    413.     -ms-transform: translate(-30px, 0);
    414.   }
    415.  
    416.   50% {
    417.     -ms-transform: translate(-30px, 30px);
    418.   }
    419.  
    420.   75% {
    421.     -ms-transform: translate(-30px, 0);
    422.   }
    423.  
    424.   100% {
    425.     -ms-transform: translate(0, 0);
    426.   }
    427. }
    428.  
    429. @-o-keyframes loader-3-right {
    430.   0% {
    431.     -o-transform: translate(0, 0);
    432.   }
    433.  
    434.   25% {
    435.     -o-transform: translate(-30px, 0);
    436.   }
    437.  
    438.   50% {
    439.     -o-transform: translate(-30px, 30px);
    440.   }
    441.  
    442.   75% {
    443.     -o-transform: translate(-30px, 0);
    444.   }
    445.  
    446.   100% {
    447.     -o-transform: translate(0, 0);
    448.   }
    449. }
    450.  
    451. @keyframes loader-3-right {
    452.   0% {
    453.     transform: translate(0, 0);
    454.   }
    455.  
    456.   25% {
    457.     transform: translate(-30px, 0);
    458.   }
    459.  
    460.   50% {
    461.     transform: translate(-30px, 30px);
    462.   }
    463.  
    464.   75% {
    465.     transform: translate(-30px, 0);
    466.   }
    467.  
    468.   100% {
    469.     transform: translate(0, 0);
    470.   }
    471. }
    472.  
    473. /* ============================================================
    474.   loader 4
    475. ============================================================ */
    476. .loader-4 {
    477.   height: 100px;
    478. }
    479. .loader-4 .loader {
    480.   width: 100px;
    481.   height: 100px;
    482. }
    483. .loader-4 .loader:before, .loader-4 .loader:after {
    484.   display: block;
    485.   position: absolute;
    486.   top: 0;
    487.   bottom: 0;
    488.   margin: auto 0;
    489.   width: 50px;
    490.   height: 50px;
    491.   content: "";
    492.   -webkit-border-radius: 25px;
    493.   -moz-border-radius: 25px;
    494.   -ms-border-radius: 25px;
    495.   -o-border-radius: 25px;
    496.   border-radius: 25px;
    497. }
    498. .loader-4 .loader:before {
    499.   left: 0;
    500.   background-color: #03445d;
    501.   -webkit-animation: loader-4-left 0.5s infinite ease;
    502.   -moz-animation: loader-4-left 0.5s infinite ease;
    503.   -ms-animation: loader-4-left 0.5s infinite ease;
    504.   -o-animation: loader-4-left 0.5s infinite ease;
    505.   animation: loader-4-left 0.5s infinite ease;
    506. }
    507. .loader-4 .loader:after {
    508.   right: 0;
    509.   background-color: #7c7803;
    510.   -webkit-animation: loader-4-right 0.5s infinite ease;
    511.   -moz-animation: loader-4-right 0.5s infinite ease;
    512.   -ms-animation: loader-4-right 0.5s infinite ease;
    513.   -o-animation: loader-4-right 0.5s infinite ease;
    514.   animation: loader-4-right 0.5s infinite ease;
    515. }
    516.  
    517. /* left ball */
    518. @-webkit-keyframes loader-4-left {
    519.   0% {
    520.     -webkit-transform: scale(0.5);
    521.   }
    522.  
    523.   50% {
    524.     -webkit-transform: scale(1);
    525.   }
    526.  
    527.   100% {
    528.     -webkit-transform: scale(0.5);
    529.   }
    530. }
    531.  
    532. @-moz-keyframes loader-4-left {
    533.   0% {
    534.     -moz-transform: scale(0.5);
    535.   }
    536.  
    537.   50% {
    538.     -moz-transform: scale(1);
    539.   }
    540.  
    541.   100% {
    542.     -moz-transform: scale(0.5);
    543.   }
    544. }
    545.  
    546. @-ms-keyframes loader-4-left {
    547.   0% {
    548.     -ms-transform: scale(0.5);
    549.   }
    550.  
    551.   50% {
    552.     -ms-transform: scale(1);
    553.   }
    554.  
    555.   100% {
    556.     -ms-transform: scale(0.5);
    557.   }
    558. }
    559.  
    560. @-o-keyframes loader-4-left {
    561.   0% {
    562.     -o-transform: scale(0.5);
    563.   }
    564.  
    565.   50% {
    566.     -o-transform: scale(1);
    567.   }
    568.  
    569.   100% {
    570.     -o-transform: scale(0.5);
    571.   }
    572. }
    573.  
    574. @keyframes loader-4-left {
    575.   0% {
    576.     transform: scale(0.5);
    577.   }
    578.  
    579.   50% {
    580.     transform: scale(1);
    581.   }
    582.  
    583.   100% {
    584.     transform: scale(0.5);
    585.   }
    586. }
    587.  
    588. /* right ball */
    589. @-webkit-keyframes loader-4-right {
    590.   0% {
    591.     -webkit-transform: scale(1);
    592.   }
    593.  
    594.   50% {
    595.     -webkit-transform: scale(0.5);
    596.   }
    597.  
    598.   100% {
    599.     -webkit-transform: scale(1);
    600.   }
    601. }
    602.  
    603. @-moz-keyframes loader-4-right {
    604.   0% {
    605.     -moz-transform: scale(1);
    606.   }
    607.  
    608.   50% {
    609.     -moz-transform: scale(0.5);
    610.   }
    611.  
    612.   100% {
    613.     -moz-transform: scale(1);
    614.   }
    615. }
    616.  
    617. @-ms-keyframes loader-4-right {
    618.   0% {
    619.     -ms-transform: scale(1);
    620.   }
    621.  
    622.   50% {
    623.     -ms-transform: scale(0.5);
    624.   }
    625.  
    626.   100% {
    627.     -ms-transform: scale(1);
    628.   }
    629. }
    630.  
    631. @-o-keyframes loader-4-right {
    632.   0% {
    633.     -o-transform: scale(1);
    634.   }
    635.  
    636.   50% {
    637.     -o-transform: scale(0.5);
    638.   }
    639.  
    640.   100% {
    641.     -o-transform: scale(1);
    642.   }
    643. }
    644.  
    645. @keyframes loader-4-right {
    646.   0% {
    647.     transform: scale(1);
    648.   }
    649.  
    650.   50% {
    651.     transform: scale(0.5);
    652.   }
    653.  
    654.   100% {
    655.     transform: scale(1);
    656.   }
    657. }

    Output-

    pre-loader loader css html spiner pure css css3 Animation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: