{"id":1999,"date":"2016-06-21T09:17:12","date_gmt":"2016-06-21T09:17:12","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1999"},"modified":"2023-09-24T14:01:52","modified_gmt":"2023-09-24T14:01:52","slug":"a-css-pre-loader-used-with-bootstrap-2-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/","title":{"rendered":"A CSS pre-loader used with Bootstrap \u2013 2 demos"},"content":{"rendered":"

The preloader by using CSS<\/strong><\/h3>\n

You may use this preloader as the content of the\u00a0website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for downloading.<\/p>\n

You may use a pre-loader for that purpose which is visible to the visitors so they know something is happening behind rather than leaving the website.<\/p>\n

Have a look at the demos below where a pre-loader is build by using pure CSS and implemented with Bootstrap framework. Although, you may use it for any website other than Bootstrap as well.<\/p>\n

A demo of CSS preloader<\/strong><\/h3>\n

Click the image or link below to see the pre-loader live in action. You may see and take the complete code including CSS and markup from the left pane of demo page:<\/p>\n

\"Bootstrap<\/p>\n

See online demo and code<\/strong><\/h6>\n

For making this pre-loader, a few CSS3 properties are also used like animation, animation-direction, box-shadow, transform with translate and more.<\/p>\n

Get the complete code from the demo page.<\/p>\n

A demo with another style by changing CSS 3 properties<\/strong><\/h3>\n

Have a look at another preloader that uses CSS 3 properties. This time, I used the:<\/p>\n

animation-direction: alternate-reverse;<\/p><\/blockquote>\n

for box styles.<\/p>\n

\"Bootstrap<\/p>\n

See online demo and code<\/strong><\/h6>\n

The angle of 2D transform method (CSS 3 property) is also changed as compared to above demo:<\/p>\n

0% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(-90px);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 50% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(120px);\r\n\r\n\u00a0\u00a0\u00a0 }<\/pre>\n
 <\/p>\n
The complete CSS is:<\/strong><\/p>\n
.pre-loader-demo{\r\n\r\n\u00a0\u00a0\u00a0 width: 180px;\r\n\r\n\u00a0\u00a0\u00a0 display: flex;\r\n\r\n\u00a0\u00a0\u00a0 justify-content: center;\r\n\r\n\u00a0\u00a0\u00a0 overflow: hidden;\r\n\r\n\u00a0\u00a0\u00a0 margin: 60px auto;\r\n\r\n\u00a0\r\n\r\n}\r\n\r\n.pre-loader-demo .inner-part-preloader{\r\n\r\n\u00a0\u00a0\u00a0 width: 10px;\r\n\r\n\u00a0\u00a0\u00a0 height: 30px;\r\n\r\n\u00a0\u00a0\u00a0 padding: 2px;\r\n\r\n\u00a0\u00a0\u00a0 border-radius:50%;\r\n\r\n\u00a0\u00a0\u00a0 background-color: rgba(64, 128, 128, 0.8);\r\n\r\n\u00a0\u00a0\u00a0 box-shadow: -15px 0 0 rgba(0, 0, 0, 0.9), -30px 0 0 rgba(0, 0, 0, 0.6), 15px 0 0 rgba(0, 0, 0, 0.3), 30px 0 0 rgba(0, 0, 0, 0.1);\r\n\r\n}\r\n\r\n.box-style{\r\n\r\n\u00a0\u00a0\u00a0 position: relative;\r\n\r\n\u00a0\u00a0\u00a0 width: 100%;\r\n\r\n\u00a0\u00a0\u00a0 height: 100%;\r\n\r\n\u00a0\u00a0\u00a0 background-color: #A9D3D3;\r\n\r\n\u00a0\u00a0\u00a0 box-shadow: -15px 0 0 #FF9191, 15px 0 0 #FF5555;\r\n\r\n\u00a0\u00a0\u00a0 animation: loading 2s steps(7, end) infinite;\r\n\r\n\u00a0\u00a0\u00a0 animation-direction: alternate-reverse;\r\n\r\n}\r\n\r\n@-webkit-keyframes loading{\r\n\r\n\u00a0\u00a0\u00a0 0% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(-90px);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 50% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(120px);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n}\r\n\r\n@keyframes loading{\r\n\r\n\u00a0\u00a0\u00a0 0% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(-90px);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 50% {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translatex(120px);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n}<\/pre>\n
 <\/p>\n
The markup:<\/p>\n
<div class=\"row\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"col-md-6\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"pre-loader-demo\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"inner-part-preloader\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"box-style\"><\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div><\/pre>\n
 <\/p>\n
You may try different values and colors for main box, inner boxes 2D transform etc. for creating a preloader as per need.<\/p>\n","protected":false},"excerpt":{"rendered":"
The preloader by using CSS You may use this preloader as the content of the\u00a0website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[],"yoast_head":"\nA CSS pre-loader used with Bootstrap \u2013 2 demos<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A CSS pre-loader used with Bootstrap \u2013 2 demos\" \/>\n<meta property=\"og:description\" content=\"The preloader by using CSS You may use this preloader as the content of the\u00a0website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-21T09:17:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-24T14:01:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/44.0_1-Bootstrap-pre-loader.png\" \/>\n\t<meta property=\"og:image:width\" content=\"151\" \/>\n\t<meta property=\"og:image:height\" content=\"77\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/\",\"name\":\"A CSS pre-loader used with Bootstrap \u2013 2 demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-06-21T09:17:12+00:00\",\"dateModified\":\"2023-09-24T14:01:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A CSS pre-loader used with Bootstrap \u2013 2 demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A CSS pre-loader used with Bootstrap \u2013 2 demos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/","og_locale":"en_US","og_type":"article","og_title":"A CSS pre-loader used with Bootstrap \u2013 2 demos","og_description":"The preloader by using CSS You may use this preloader as the content of the\u00a0website is loading behind the scene. For example, images are heavy and you want all images to be loaded for the carousel or other sections of the web page or your website has a heavy app that takes some time for ... Read more","og_url":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/","article_published_time":"2016-06-21T09:17:12+00:00","article_modified_time":"2023-09-24T14:01:52+00:00","og_image":[{"width":151,"height":77,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/44.0_1-Bootstrap-pre-loader.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/","url":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/","name":"A CSS pre-loader used with Bootstrap \u2013 2 demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-06-21T09:17:12+00:00","dateModified":"2023-09-24T14:01:52+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/a-css-pre-loader-used-with-bootstrap-2-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"A CSS pre-loader used with Bootstrap \u2013 2 demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1999"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1999"}],"version-history":[{"count":2,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1999\/revisions"}],"predecessor-version":[{"id":9622,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1999\/revisions\/9622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2000"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}