广西快乐10分开奖记录|广西快乐10分走势图表
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

How TO - CSS Loader


Learn how to create a preloader with CSS.


How To Create a Loader


Step 1) Add HTML:

Example

<div class="loader"></div>
Step 2) Add CSS:

Example

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
Try it Yourself ?

Example Explained

The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.

The blue thing that spins around inside the border is specified with the border-top property. You can also include border-bottom, border-left and/or border-right if you want more "spinners" (see example below).

The size of the loader is specified with the width and height properties.

At last, we add an animation that makes the blue thing spin forever with a 2 second animation speed.

Note: You should also include -webkit- and -ms- prefixes for browsers that do not support animation and transform properties. Click on the example to see how.


Add more spinners

Example

.loader {
 border-top: 16px solid blue;
 border-bottom: 16px solid blue;
}
Try it Yourself ?

Example

.loader {
 border-top: 16px solid blue;
 border-right: 16px solid green;
 border-bottom: 16px solid red;
}
Try it Yourself ?

Example

.loader {
 border-top: 16px solid blue;
 border-right: 16px solid green;
 border-bottom: 16px solid red;
 border-left: 16px solid pink;
}
Try it Yourself ?


Another Example

An example of how to place the loader in the middle of the page and show "page content" when loading is complete:

广西快乐10分开奖记录 广西快3预测计划 易彩彩票软件 街机金蟾捕鱼刷金币 中信证券股票分析论文 山东时时吗 加拿大28投注平台哪个好 重庆快乐十分投注 今年创业做什么生意赚钱快赚钱多 棋牌现金二八杠官网 快3猜大小单双技巧