├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pradip Banjara || Apple Loader 8 | 9 | 10 | 11 |
12 | ios_logo 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html,body { 2 | height: 100%; 3 | } 4 | body { 5 | position: relative; 6 | margin: 0; 7 | background: rgb(255, 0, 13); 8 | } 9 | .container { 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%, -50%); 14 | text-align: center; 15 | } 16 | .container img { 17 | margin-bottom: 15px; 18 | width: 75px; 19 | } 20 | .progress { 21 | position: relative; 22 | width: 24em; 23 | height: 0.25em; 24 | background-color: rgb(229, 233, 235); 25 | } 26 | .progress-bar { 27 | position: relative; 28 | height: 100%; 29 | background-image: -webkit-linear-gradient(to right, rgb(76, 217, 105), rgb(90, 200, 250), rgb(0, 132, 255), rgb(52, 170, 220), rgb(88, 86, 217), rgb(255, 45, 83)); 30 | background-image: linear-gradient(to right, rgb(76, 217, 100), rgb(90, 200, 250), rgb(0, 122, 255), rgb(52, 170, 220), rgb(88, 86, 214), rgb(255, 45, 85)); 31 | background-size: 24em 0.25em; 32 | border-radius: 10px; 33 | -moz-animation: iosProgress 6s ease-in; 34 | -webkit-animation: iosProgress 6s ease-in; 35 | animation: iosProgress 6s ease-in; 36 | animation-delay:.15s; 37 | } 38 | .shadow { 39 | position: absolute; 40 | top: 100%; 41 | width: 100%; 42 | height: 50px; 43 | background-image: -webkit-linear-gradient(to bottom, rgb(235, 247, 247), transparent); 44 | background-image: linear-gradient(to bottom, rgb(218, 236, 236), transparent); 45 | transform: skew(50deg); 46 | transform-origin: 0 0; 47 | } 48 | 49 | /* Animations */ 50 | @-moz-keyframes iosProgress { 51 | 0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);} 52 | 0% {width: 0;} 53 | 100% {width: 100%;} 54 | } 55 | @-webkit-keyframes iosProgress { 56 | 0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);} 57 | 0% {width: 0;} 58 | 100% {width: 100%;} 59 | } 60 | @keyframes iosProgress { 61 | 0%, 100% {transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);} 62 | 0% {width: 0;} 63 | 100% {width: 100%;} 64 | } --------------------------------------------------------------------------------