BACK
BACK
BACK
Loading...

How to Make Your Custom CSS Loading Page

Should You Create a CSS Loading Page?

One thing that frustrates website visitors is waiting for a page to load. To reduce the user’s aggravation you may want to consider a custom CSS loading page. A custom preloading screen can display some kind of graphics which will distract the viewer briefly while waiting for the page to load. You have probably seen examples many times without thinking much about it. How many times have you opened a page online and seen a spinning circle graphic during the few seconds that you wait for a page to actually open? To create loading page technique it uses CSS3 transitions so that when a page begins to load, an animation effect is displayed, and transitions out when the page has finished loading.

 

Steps for Creating a CSS Loading Page

css loading page
The following shows the steps you will take to add CSS3 transitions to an existing CSS3 preloader:

  1. Add HTML and CSS for loading overlay: In the “index.html” is an existing CSS3 preloader “#loader” on a white background. However we want a high contrast between preload screen and the content. To get that contrast add two parts of the preloading screen inside of “#loader‐wrapper”:
<div id="loader‐wrapper">
<div id="loader"></div>
<div class="loader‐section section‐left"></div>
<div class="loader‐section section‐right"></div>
</div>

Then add some CSS into the “css/main.css” , just after the “@keyframes” spin declaration:

#loader‐wrapper .loader‐section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #222222;
z‐index: 1000;
}
#loader‐wrapper .loader‐section.section‐left {
left: 0;
}
#loader‐wrapper .loader‐section.section‐right {
right: 0;
}

Although we now have a full screen dark overlay, it covers our rotating #loader and makes the page title hard to read.

  1. Change the heading color to light grey: Find “#loader” in the stylesheet and add the following style including the “h1” style just below the default p styles:
#loader {
z‐index: 1001; /* anything higher than z‐index: 1000 of .loader‐section*/
}
h1 {
color: #EEEEEE;
}
  1. Add preloader transition: When the body gets a “class .loaded” both preloading screen sections will be moved out of the view using CSS3 transforms. Add the following code to “main.css”
/* Loaded */
.loaded #loader‐wrapper .loader‐section.section‐left {
‐webkit‐transform: translateX(‐100%); /* Chrome, Opera 15+, Safari 3.1+ */
‐ms‐transform: translateX(‐100%); /* IE 9 */
transform: translateX(‐100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader‐wrapper .loader‐section.section‐right {
‐webkit‐transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
‐ms‐transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
  • Fade the preloader out at the same time by adding the following to the stylesheet:
.loaded #loader {
opacity: 0;
}
  • Add “visibility: hidden;” to “#loader‐wrapper” because the “#loader” container is still sitting on top of the content making “#content” not accessible.
.loaded #loader‐wrapper {
visibility: hidden;
}
  1. Fade out the preloader first, by adding CSS3 transitions to “#loader”
.loaded #loader {
opacity: 0;
‐webkit‐transition: all 0.3s ease‐out;
transition: all 0.3s ease‐out;
}
  1. Animate both sides out of a view with a slight 0.3s delay:
.loaded #loader‐wrapper .loader‐section.section‐right,
.loaded #loader‐wrapper .loader‐section.section‐left {
‐webkit‐transition: all 0.3s 0.3s ease‐out;
transition: all 0.3s 0.3s ease‐out;
}
  1. Last animate the whole “#loader‐wrapper” out of the view using “transform: translateY(‐100%)”:
.loaded #loader‐wrapper {
‐webkit‐transform: translateY(‐100%);
‐ms‐transform: translateY(‐100%);
transform: translateY(‐100%);

‐webkit‐transition: all 0.3s 0.6s ease‐out; transition: all 0.3s 0.6s ease‐out; }

That’s all there is to creating an animated preloading screen using CSS3 animations and transitions. The main use to create a loading page like this is to cut down on the frustration your website visitors may feel while waiting for a page to load. By distracting their attention for a second or two a slightly slower loading page won’t be noticed as much. It is especially useful for one page parallax scrolling websites as they don’t take long to become bulky and slow loading times even with everything optimized.

To draw attention to your website you can also try using these CSS text animation effects.

If you need to create a CSS loading page, we can give you a hand!

Request a quote

We will contact you as soon as posible.

  • Afghanistan +93
  • Albania +355
  • Algeria +213
  • American Samoa +1684
  • Andorra +376
  • Angola +244
  • Anguilla +1264
  • Antarctica +672
  • Antigua And Barbuda +1268
  • Argentina +54
  • Armenia +374
  • Aruba +297
  • Australia +61
  • Austria +43
  • Azerbaijan +994
  • Bahamas +1242
  • Bahrain +973
  • Bangladesh +880
  • Barbados +1246
  • Belarus +375
  • Belgium +32
  • Belize +501
  • Benin +229
  • Bermuda +1441
  • Bhutan +975
  • Bolivia +591
  • Bosnia And Herzegovina +387
  • Botswana +267
  • Brazil +55
  • Brunei Darussalam +673
  • Bulgaria +359
  • Burkina Faso +226
  • Burundi +257
  • Cambodia +855
  • Cameroon +237
  • Canada +1
  • Cape Verde +238
  • Cayman Islands +1345
  • Central African Republic +236
  • Chad +235
  • Chile +56
  • China +86
  • Christmas Island +61
  • Cocos (keeling) Islands +61
  • Colombia +57
  • Comoros +269
  • Congo +242
  • Congo, The Democratic Republic Of The +243
  • Cook Islands +682
  • Costa Rica +506
  • Cote D Ivoire +225
  • Croatia +385
  • Cuba +53
  • Cyprus +357
  • Czech Republic +420
  • Denmark +45
  • Djibouti +253
  • Dominica +1767
  • Dominican Republic +1809
  • Ecuador +593
  • Egypt +20
  • El Salvador +503
  • Equatorial Guinea +240
  • Eritrea +291
  • Estonia +372
  • Ethiopia +251
  • Falkland Islands (malvinas) +500
  • Faroe Islands +298
  • Fiji +679
  • Finland +358
  • France +33
  • French Polynesia +689
  • Gabon +241
  • Gambia +220
  • Georgia +995
  • Germany +49
  • Ghana +233
  • Gibraltar +350
  • Greece +30
  • Greenland +299
  • Grenada +1473
  • Guam +1671
  • Guatemala +502
  • Guinea +224
  • Guinea-bissau +245
  • Guyana +592
  • Haiti +509
  • Holy See (vatican City State) +39
  • Honduras +504
  • Hong Kong +852
  • Hungary +36
  • Iceland +354
  • India +91
  • Indonesia +62
  • Iran, Islamic Republic Of +98
  • Iraq +964
  • Ireland +353
  • Isle Of Man +44
  • Israel +972
  • Italy +39
  • Jamaica +1876
  • Japan +81
  • Jordan +962
  • Kazakstan +7
  • Kenya +254
  • Kiribati +686
  • Korea Democratic Peoples Republic Of +850
  • Korea Republic Of +82
  • Kosovo +381
  • Kuwait +965
  • Kyrgyzstan +996
  • Lao Peoples Democratic Republic +856
  • Latvia +371
  • Lebanon +961
  • Lesotho +266
  • Liberia +231
  • Libyan Arab Jamahiriya +218
  • Liechtenstein +423
  • Lithuania +370
  • Luxembourg +352
  • Macau +853
  • Macedonia, The Former Yugoslav Republic Of +389
  • Madagascar +261
  • Malawi +265
  • Malaysia +60
  • Maldives +960
  • Mali +223
  • Malta +356
  • Marshall Islands +692
  • Mauritania +222
  • Mauritius +230
  • Mayotte +262
  • Mexico +52
  • Micronesia, Federated States Of +691
  • Moldova, Republic Of +373
  • Monaco +377
  • Mongolia +976
  • Montenegro +382
  • Montserrat +1664
  • Morocco +212
  • Mozambique +258
  • Myanmar +95
  • Namibia +264
  • Nauru +674
  • Nepal +977
  • Netherlands +31
  • Netherlands Antilles +599
  • New Caledonia +687
  • New Zealand +64
  • Nicaragua +505
  • Niger +227
  • Nigeria +234
  • Niue +683
  • Northern Mariana Islands +1670
  • Norway +47
  • Oman +968
  • Pakistan +92
  • Palau +680
  • Panama +507
  • Papua New Guinea +675
  • Paraguay +595
  • Peru +51
  • Philippines +63
  • Pitcairn +870
  • Poland +48
  • Portugal +351
  • Puerto Rico +1
  • Qatar +974
  • Romania +40
  • Russian Federation +7
  • Rwanda +250
  • Saint Barthelemy +590
  • Saint Helena +290
  • Saint Kitts And Nevis +1869
  • Saint Lucia +1758
  • Saint Martin +1599
  • Saint Pierre And Miquelon +508
  • Saint Vincent And The Grenadines +1784
  • Samoa +685
  • San Marino +378
  • Sao Tome And Principe +239
  • Saudi Arabia +966
  • Senegal +221
  • Serbia +381
  • Seychelles +248
  • Sierra Leone +232
  • Singapore +65
  • Slovakia +421
  • Slovenia +386
  • Solomon Islands +677
  • Somalia +252
  • South Africa +27
  • Spain +34
  • Sri Lanka +94
  • Sudan +249
  • Suriname +597
  • Swaziland +268
  • Sweden +46
  • Switzerland +41
  • Syrian Arab Republic +963
  • Taiwan, Province Of China +886
  • Tajikistan +992
  • Tanzania, United Republic Of +255
  • Thailand +66
  • Timor-leste +670
  • Togo +228
  • Tokelau +690
  • Tonga +676
  • Trinidad And Tobago +1868
  • Tunisia +216
  • Turkey +90
  • Turkmenistan +993
  • Turks And Caicos Islands +1649
  • Tuvalu +688
  • Uganda +256
  • Ukraine +380
  • United Arab Emirates +971
  • United Kingdom +44
  • United States +1
  • Uruguay +598
  • Uzbekistan +998
  • Vanuatu +678
  • Venezuela +58
  • Viet Nam +84
  • Virgin Islands, British +1284
  • Virgin Islands, U.s. +1340
  • Wallis And Futuna +681
  • Yemen +967
  • Zambia +260
  • Zimbabwe +263

Attach File (max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Your email address will not be published. Required fields are marked *

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

  • Afghanistan +93
  • Albania +355
  • Algeria +213
  • American Samoa +1684
  • Andorra +376
  • Angola +244
  • Anguilla +1264
  • Antarctica +672
  • Antigua And Barbuda +1268
  • Argentina +54
  • Armenia +374
  • Aruba +297
  • Australia +61
  • Austria +43
  • Azerbaijan +994
  • Bahamas +1242
  • Bahrain +973
  • Bangladesh +880
  • Barbados +1246
  • Belarus +375
  • Belgium +32
  • Belize +501
  • Benin +229
  • Bermuda +1441
  • Bhutan +975
  • Bolivia +591
  • Bosnia And Herzegovina +387
  • Botswana +267
  • Brazil +55
  • Brunei Darussalam +673
  • Bulgaria +359
  • Burkina Faso +226
  • Burundi +257
  • Cambodia +855
  • Cameroon +237
  • Canada +1
  • Cape Verde +238
  • Cayman Islands +1345
  • Central African Republic +236
  • Chad +235
  • Chile +56
  • China +86
  • Christmas Island +61
  • Cocos (keeling) Islands +61
  • Colombia +57
  • Comoros +269
  • Congo +242
  • Congo, The Democratic Republic Of The +243
  • Cook Islands +682
  • Costa Rica +506
  • Cote D Ivoire +225
  • Croatia +385
  • Cuba +53
  • Cyprus +357
  • Czech Republic +420
  • Denmark +45
  • Djibouti +253
  • Dominica +1767
  • Dominican Republic +1809
  • Ecuador +593
  • Egypt +20
  • El Salvador +503
  • Equatorial Guinea +240
  • Eritrea +291
  • Estonia +372
  • Ethiopia +251
  • Falkland Islands (malvinas) +500
  • Faroe Islands +298
  • Fiji +679
  • Finland +358
  • France +33
  • French Polynesia +689
  • Gabon +241
  • Gambia +220
  • Georgia +995
  • Germany +49
  • Ghana +233
  • Gibraltar +350
  • Greece +30
  • Greenland +299
  • Grenada +1473
  • Guam +1671
  • Guatemala +502
  • Guinea +224
  • Guinea-bissau +245
  • Guyana +592
  • Haiti +509
  • Holy See (vatican City State) +39
  • Honduras +504
  • Hong Kong +852
  • Hungary +36
  • Iceland +354
  • India +91
  • Indonesia +62
  • Iran, Islamic Republic Of +98
  • Iraq +964
  • Ireland +353
  • Isle Of Man +44
  • Israel +972
  • Italy +39
  • Jamaica +1876
  • Japan +81
  • Jordan +962
  • Kazakstan +7
  • Kenya +254
  • Kiribati +686
  • Korea Democratic Peoples Republic Of +850
  • Korea Republic Of +82
  • Kosovo +381
  • Kuwait +965
  • Kyrgyzstan +996
  • Lao Peoples Democratic Republic +856
  • Latvia +371
  • Lebanon +961
  • Lesotho +266
  • Liberia +231
  • Libyan Arab Jamahiriya +218
  • Liechtenstein +423
  • Lithuania +370
  • Luxembourg +352
  • Macau +853
  • Macedonia, The Former Yugoslav Republic Of +389
  • Madagascar +261
  • Malawi +265
  • Malaysia +60
  • Maldives +960
  • Mali +223
  • Malta +356
  • Marshall Islands +692
  • Mauritania +222
  • Mauritius +230
  • Mayotte +262
  • Mexico +52
  • Micronesia, Federated States Of +691
  • Moldova, Republic Of +373
  • Monaco +377
  • Mongolia +976
  • Montenegro +382
  • Montserrat +1664
  • Morocco +212
  • Mozambique +258
  • Myanmar +95
  • Namibia +264
  • Nauru +674
  • Nepal +977
  • Netherlands +31
  • Netherlands Antilles +599
  • New Caledonia +687
  • New Zealand +64
  • Nicaragua +505
  • Niger +227
  • Nigeria +234
  • Niue +683
  • Northern Mariana Islands +1670
  • Norway +47
  • Oman +968
  • Pakistan +92
  • Palau +680
  • Panama +507
  • Papua New Guinea +675
  • Paraguay +595
  • Peru +51
  • Philippines +63
  • Pitcairn +870
  • Poland +48
  • Portugal +351
  • Puerto Rico +1
  • Qatar +974
  • Romania +40
  • Russian Federation +7
  • Rwanda +250
  • Saint Barthelemy +590
  • Saint Helena +290
  • Saint Kitts And Nevis +1869
  • Saint Lucia +1758
  • Saint Martin +1599
  • Saint Pierre And Miquelon +508
  • Saint Vincent And The Grenadines +1784
  • Samoa +685
  • San Marino +378
  • Sao Tome And Principe +239
  • Saudi Arabia +966
  • Senegal +221
  • Serbia +381
  • Seychelles +248
  • Sierra Leone +232
  • Singapore +65
  • Slovakia +421
  • Slovenia +386
  • Solomon Islands +677
  • Somalia +252
  • South Africa +27
  • Spain +34
  • Sri Lanka +94
  • Sudan +249
  • Suriname +597
  • Swaziland +268
  • Sweden +46
  • Switzerland +41
  • Syrian Arab Republic +963
  • Taiwan, Province Of China +886
  • Tajikistan +992
  • Tanzania, United Republic Of +255
  • Thailand +66
  • Timor-leste +670
  • Togo +228
  • Tokelau +690
  • Tonga +676
  • Trinidad And Tobago +1868
  • Tunisia +216
  • Turkey +90
  • Turkmenistan +993
  • Turks And Caicos Islands +1649
  • Tuvalu +688
  • Uganda +256
  • Ukraine +380
  • United Arab Emirates +971
  • United Kingdom +44
  • United States +1
  • Uruguay +598
  • Uzbekistan +998
  • Vanuatu +678
  • Venezuela +58
  • Viet Nam +84
  • Virgin Islands, British +1284
  • Virgin Islands, U.s. +1340
  • Wallis And Futuna +681
  • Yemen +967
  • Zambia +260
  • Zimbabwe +263

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

Mobilunity - Dedicated Developers
5