API tools faq
paste
Advertisement
firoze

make different colorful horizontal scrollbar with css3 that

firoze
Jun 23rd, 2015
293
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.68 KB | None | 0 0
raw download clone embed print report
  1. // make different colorful horizontal scrollbar with css3 that are animation
  2.  
  3. // add the html code here you want to show
  4.  
  5. <div class="load-launcher"></div>
  6. <div class="load-bar active">
  7. <div class="load-bar-container">
  8. <div class="load-bar-base">
  9. <div class="load-bar-content">
  10. <div class="green"></div>
  11. <div class="red"></div>
  12. <div class="blue"></div>
  13. <div class="yellow"></div>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="load-bar-container">
  18. <div class="load-bar-base">
  19. <div class="load-bar-content">
  20. <div class="green"></div>
  21. <div class="yellow"></div>
  22. <div class="blue"></div>
  23. <div class="red"></div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28.  
  29.  
  30. ================================================================
  31.  
  32. // css for this
  33.  
  34.  
  35. .load-bar {
  36. bottom: 0;
  37. float: left;
  38. height: 5px;
  39. left: 0;
  40. overflow: hidden;
  41. position: absolute;
  42. -moz-transform: translateZ(0);
  43. -webkit-transform: translateZ(0);
  44. transform: translateZ(0);
  45. width: 100%;
  46. z-index: 3
  47. }
  48. .load-bar.top {
  49. bottom: auto;
  50. top: 64px
  51. }
  52. .load-bar .load-bar-container {
  53. float: left;
  54. height: 100%;
  55. overflow: hidden;
  56. width: 50%
  57. }
  58. .load-bar .load-bar-container .load-bar-base {
  59. background-color: #159756;
  60. float: left;
  61. height: 100%;
  62. overflow: hidden;
  63. -moz-transform: translate(100%, 0);
  64. -ms-transform: translate(100%, 0);
  65. -webkit-transform: translate(100%, 0);
  66. transform: translate(100%, 0);
  67. -moz-transform: translate3d(100%, 0, 0);
  68. -ms-transform: translate3d(100%, 0, 0);
  69. -webkit-transform: translate3d(100%, 0, 0);
  70. transform: translate3d(100%, 0, 0);
  71. -moz-transform-origin: top left;
  72. -ms-transform-origin: top left;
  73. -webkit-transform-origin: top left;
  74. transform-origin: top left;
  75. width: 100%
  76. }
  77. .load-bar .load-bar-container .load-bar-content {
  78. float: left;
  79. height: 100%;
  80. position: relative;
  81. -moz-transform-origin: top center;
  82. -ms-transform-origin: top center;
  83. -webkit-transform-origin: top center;
  84. transform-origin: top center;
  85. width: 400%
  86. }
  87. .load-bar .load-bar-container .load-bar-content div {
  88. float: left;
  89. height: 100%;
  90. width: 25%
  91. }
  92. .load-bar .load-bar-container .load-bar-content div.red {
  93. background-color: #da4733
  94. }
  95. .load-bar .load-bar-container .load-bar-content div.yellow {
  96. background-color: #fdba2c
  97. }
  98. .load-bar .load-bar-container .load-bar-content div.green {
  99. background-color: transparent
  100. }
  101. .load-bar .load-bar-container .load-bar-content div.blue {
  102. background-color: #1d6fee
  103. }
  104. .load-bar .load-bar-container:last-child {
  105. float: right;
  106. -moz-transform-origin: top right;
  107. -ms-transform-origin: top right;
  108. -webkit-transform-origin: top right;
  109. transform-origin: top right
  110. }
  111. .load-bar .load-bar-container:last-child .load-bar-base {
  112. -moz-transform: translate(-100%, 0);
  113. -ms-transform: translate(-100%, 0);
  114. -webkit-transform: translate(-100%, 0);
  115. transform: translate(-100%, 0);
  116. -moz-transform: translate3d(-100%, 0, 0);
  117. -ms-transform: translate3d(-100%, 0, 0);
  118. -webkit-transform: translate3d(-100%, 0, 0);
  119. transform: translate3d(-100%, 0, 0)
  120. }
  121. .load-bar.active .load-bar-container .load-bar-base {
  122. -moz-animation-delay: 0;
  123. -webkit-animation-delay: 0;
  124. animation-delay: 0;
  125. -moz-animation-duration: 1s;
  126. -webkit-animation-duration: 1s;
  127. animation-duration: 1s;
  128. -moz-animation-direction: normal;
  129. -webkit-animation-direction: normal;
  130. animation-direction: normal;
  131. -moz-animation-fill-mode: forwards;
  132. -webkit-animation-fill-mode: forwards;
  133. animation-fill-mode: forwards;
  134. -moz-animation-iteration-count: 1;
  135. -webkit-animation-iteration-count: 1;
  136. animation-iteration-count: 1;
  137. -moz-animation-name: load-bar-left-in;
  138. -webkit-animation-name: load-bar-left-in;
  139. animation-name: load-bar-left-in;
  140. -moz-animation-timing-function: cubic-bezier(.455, .03, .515, .955);
  141. -webkit-animation-timing-function: cubic-bezier(.455, .03, .515, .955);
  142. animation-timing-function: cubic-bezier(.455, .03, .515, .955)
  143. }
  144. .load-bar.active .load-bar-container .load-bar-content {
  145. -moz-animation-delay: 1s;
  146. -webkit-animation-delay: 1s;
  147. animation-delay: 1s;
  148. -moz-animation-duration: 4s;
  149. -webkit-animation-duration: 4s;
  150. animation-duration: 4s;
  151. -moz-animation-direction: normal;
  152. -webkit-animation-direction: normal;
  153. animation-direction: normal;
  154. -moz-animation-fill-mode: forwards;
  155. -webkit-animation-fill-mode: forwards;
  156. animation-fill-mode: forwards;
  157. -moz-animation-iteration-count: infinite;
  158. -webkit-animation-iteration-count: infinite;
  159. animation-iteration-count: infinite;
  160. -moz-animation-name: load-bar-left;
  161. -webkit-animation-name: load-bar-left;
  162. animation-name: load-bar-left;
  163. -webkit-animation-play-state: running;
  164. -moz-animation-play-state: running;
  165. -ms-animation-play-state: running;
  166. animation-play-state: running;
  167. -moz-animation-timing-function: linear;
  168. -webkit-animation-timing-function: linear;
  169. animation-timing-function: linear
  170. }
  171. .load-bar.active .load-bar-container:last-child .load-bar-base {
  172. -moz-animation-delay: 0;
  173. -webkit-animation-delay: 0;
  174. animation-delay: 0;
  175. -moz-animation-duration: 1s;
  176. -webkit-animation-duration: 1s;
  177. animation-duration: 1s;
  178. -moz-animation-direction: normal;
  179. -webkit-animation-direction: normal;
  180. animation-direction: normal;
  181. -moz-animation-fill-mode: forwards;
  182. -webkit-animation-fill-mode: forwards;
  183. animation-fill-mode: forwards;
  184. -moz-animation-iteration-count: 1;
  185. -webkit-animation-iteration-count: 1;
  186. animation-iteration-count: 1;
  187. -moz-animation-name: load-bar-right-in;
  188. -webkit-animation-name: load-bar-right-in;
  189. animation-name: load-bar-right-in;
  190. -moz-animation-timing-function: cubic-bezier(.455, .03, .515, .955);
  191. -webkit-animation-timing-function: cubic-bezier(.455, .03, .515, .955);
  192. animation-timing-function: cubic-bezier(.455, .03, .515, .955)
  193. }
  194. .load-bar.active .load-bar-container:last-child .load-bar-content {
  195. -moz-animation-delay: 1s;
  196. -webkit-animation-delay: 1s;
  197. animation-delay: 1s;
  198. -moz-animation-direction: normal;
  199. -webkit-animation-direction: normal;
  200. animation-direction: normal;
  201. -moz-animation-duration: 4s;
  202. -webkit-animation-duration: 4s;
  203. animation-duration: 4s;
  204. -moz-animation-fill-mode: forwards;
  205. -webkit-animation-fill-mode: forwards;
  206. animation-fill-mode: forwards;
  207. -moz-animation-iteration-count: infinite;
  208. -webkit-animation-iteration-count: infinite;
  209. animation-iteration-count: infinite;
  210. -moz-animation-name: load-bar-right;
  211. -webkit-animation-name: load-bar-right;
  212. animation-name: load-bar-right;
  213. -webkit-animation-play-state: running;
  214. -moz-animation-play-state: running;
  215. -ms-animation-play-state: running;
  216. animation-play-state: running;
  217. -moz-animation-timing-function: linear;
  218. -webkit-animation-timing-function: linear;
  219. animation-timing-function: linear
  220. }
  221. @-webkit-keyframes load-bar-left {
  222. 0% {
  223. -moz-transform: translate(0, 0);
  224. -ms-transform: translate(0, 0);
  225. -webkit-transform: translate(0, 0);
  226. transform: translate(0, 0);
  227. -moz-transform: translate3d(0, 0, 0);
  228. -ms-transform: translate3d(0, 0, 0);
  229. -webkit-transform: translate3d(0, 0, 0);
  230. transform: translate3d(0, 0, 0)
  231. }
  232. 100% {
  233. -moz-transform: translate(-100%, 0);
  234. -ms-transform: translate(-100%, 0);
  235. -webkit-transform: translate(-100%, 0);
  236. transform: translate(-100%, 0);
  237. -moz-transform: translate3d(-100%, 0, 0);
  238. -ms-transform: translate3d(-100%, 0, 0);
  239. -webkit-transform: translate3d(-100%, 0, 0);
  240. transform: translate3d(-100%, 0, 0)
  241. }
  242. }
  243. @-moz-keyframes load-bar-left {
  244. 0% {
  245. -moz-transform: translate(0, 0);
  246. -ms-transform: translate(0, 0);
  247. -webkit-transform: translate(0, 0);
  248. transform: translate(0, 0);
  249. -moz-transform: translate3d(0, 0, 0);
  250. -ms-transform: translate3d(0, 0, 0);
  251. -webkit-transform: translate3d(0, 0, 0);
  252. transform: translate3d(0, 0, 0)
  253. }
  254. 100% {
  255. -moz-transform: translate(-100%, 0);
  256. -ms-transform: translate(-100%, 0);
  257. -webkit-transform: translate(-100%, 0);
  258. transform: translate(-100%, 0);
  259. -moz-transform: translate3d(-100%, 0, 0);
  260. -ms-transform: translate3d(-100%, 0, 0);
  261. -webkit-transform: translate3d(-100%, 0, 0);
  262. transform: translate3d(-100%, 0, 0)
  263. }
  264. }
  265. @keyframes load-bar-left {
  266. 0% {
  267. -moz-transform: translate(0, 0);
  268. -ms-transform: translate(0, 0);
  269. -webkit-transform: translate(0, 0);
  270. transform: translate(0, 0);
  271. -moz-transform: translate3d(0, 0, 0);
  272. -ms-transform: translate3d(0, 0, 0);
  273. -webkit-transform: translate3d(0, 0, 0);
  274. transform: translate3d(0, 0, 0)
  275. }
  276. 100% {
  277. -moz-transform: translate(-100%, 0);
  278. -ms-transform: translate(-100%, 0);
  279. -webkit-transform: translate(-100%, 0);
  280. transform: translate(-100%, 0);
  281. -moz-transform: translate3d(-100%, 0, 0);
  282. -ms-transform: translate3d(-100%, 0, 0);
  283. -webkit-transform: translate3d(-100%, 0, 0);
  284. transform: translate3d(-100%, 0, 0)
  285. }
  286. }
  287. @-webkit-keyframes load-bar-right {
  288. 0% {
  289. -moz-transform: translate(-100%, 0);
  290. -ms-transform: translate(-100%, 0);
  291. -webkit-transform: translate(-100%, 0);
  292. transform: translate(-100%, 0);
  293. -moz-transform: translate3d(-100%, 0, 0);
  294. -ms-transform: translate3d(-100%, 0, 0);
  295. -webkit-transform: translate3d(-100%, 0, 0);
  296. transform: translate3d(-100%, 0, 0)
  297. }
  298. 100% {
  299. -moz-transform: translate(0, 0);
  300. -ms-transform: translate(0, 0);
  301. -webkit-transform: translate(0, 0);
  302. transform: translate(0, 0);
  303. -moz-transform: translate3d(0, 0, 0);
  304. -ms-transform: translate3d(0, 0, 0);
  305. -webkit-transform: translate3d(0, 0, 0);
  306. transform: translate3d(0, 0, 0)
  307. }
  308. }
  309. @-moz-keyframes load-bar-right {
  310. 0% {
  311. -moz-transform: translate(-100%, 0);
  312. -ms-transform: translate(-100%, 0);
  313. -webkit-transform: translate(-100%, 0);
  314. transform: translate(-100%, 0);
  315. -moz-transform: translate3d(-100%, 0, 0);
  316. -ms-transform: translate3d(-100%, 0, 0);
  317. -webkit-transform: translate3d(-100%, 0, 0);
  318. transform: translate3d(-100%, 0, 0)
  319. }
  320. 100% {
  321. -moz-transform: translate(0, 0);
  322. -ms-transform: translate(0, 0);
  323. -webkit-transform: translate(0, 0);
  324. transform: translate(0, 0);
  325. -moz-transform: translate3d(0, 0, 0);
  326. -ms-transform: translate3d(0, 0, 0);
  327. -webkit-transform: translate3d(0, 0, 0);
  328. transform: translate3d(0, 0, 0)
  329. }
  330. }
  331. @keyframes load-bar-right {
  332. 0% {
  333. -moz-transform: translate(-100%, 0);
  334. -ms-transform: translate(-100%, 0);
  335. -webkit-transform: translate(-100%, 0);
  336. transform: translate(-100%, 0);
  337. -moz-transform: translate3d(-100%, 0, 0);
  338. -ms-transform: translate3d(-100%, 0, 0);
  339. -webkit-transform: translate3d(-100%, 0, 0);
  340. transform: translate3d(-100%, 0, 0)
  341. }
  342. 100% {
  343. -moz-transform: translate(0, 0);
  344. -ms-transform: translate(0, 0);
  345. -webkit-transform: translate(0, 0);
  346. transform: translate(0, 0);
  347. -moz-transform: translate3d(0, 0, 0);
  348. -ms-transform: translate3d(0, 0, 0);
  349. -webkit-transform: translate3d(0, 0, 0);
  350. transform: translate3d(0, 0, 0)
  351. }
  352. }
  353. @-webkit-keyframes load-bar-left-in {
  354. 0% {
  355. -moz-transform: translate(100%, 0);
  356. -ms-transform: translate(100%, 0);
  357. -webkit-transform: translate(100%, 0);
  358. transform: translate(100%, 0);
  359. -moz-transform: translate3d(100%, 0, 0);
  360. -ms-transform: translate3d(100%, 0, 0);
  361. -webkit-transform: translate3d(100%, 0, 0);
  362. transform: translate3d(100%, 0, 0)
  363. }
  364. 100% {
  365. -moz-transform: translate(0, 0);
  366. -ms-transform: translate(0, 0);
  367. -webkit-transform: translate(0, 0);
  368. transform: translate(0, 0);
  369. -moz-transform: translate3d(0, 0, 0);
  370. -ms-transform: translate3d(0, 0, 0);
  371. -webkit-transform: translate3d(0, 0, 0);
  372. transform: translate3d(0, 0, 0)
  373. }
  374. }
  375. @-moz-keyframes load-bar-left-in {
  376. 0% {
  377. -moz-transform: translate(100%, 0);
  378. -ms-transform: translate(100%, 0);
  379. -webkit-transform: translate(100%, 0);
  380. transform: translate(100%, 0);
  381. -moz-transform: translate3d(100%, 0, 0);
  382. -ms-transform: translate3d(100%, 0, 0);
  383. -webkit-transform: translate3d(100%, 0, 0);
  384. transform: translate3d(100%, 0, 0)
  385. }
  386. 100% {
  387. -moz-transform: translate(0, 0);
  388. -ms-transform: translate(0, 0);
  389. -webkit-transform: translate(0, 0);
  390. transform: translate(0, 0);
  391. -moz-transform: translate3d(0, 0, 0);
  392. -ms-transform: translate3d(0, 0, 0);
  393. -webkit-transform: translate3d(0, 0, 0);
  394. transform: translate3d(0, 0, 0)
  395. }
  396. }
  397. @keyframes load-bar-left-in {
  398. 0% {
  399. -moz-transform: translate(100%, 0);
  400. -ms-transform: translate(100%, 0);
  401. -webkit-transform: translate(100%, 0);
  402. transform: translate(100%, 0);
  403. -moz-transform: translate3d(100%, 0, 0);
  404. -ms-transform: translate3d(100%, 0, 0);
  405. -webkit-transform: translate3d(100%, 0, 0);
  406. transform: translate3d(100%, 0, 0)
  407. }
  408. 100% {
  409. -moz-transform: translate(0, 0);
  410. -ms-transform: translate(0, 0);
  411. -webkit-transform: translate(0, 0);
  412. transform: translate(0, 0);
  413. -moz-transform: translate3d(0, 0, 0);
  414. -ms-transform: translate3d(0, 0, 0);
  415. -webkit-transform: translate3d(0, 0, 0);
  416. transform: translate3d(0, 0, 0)
  417. }
  418. }
  419. @-webkit-keyframes load-bar-right-in {
  420. 0% {
  421. -moz-transform: translate(-100%, 0);
  422. -ms-transform: translate(-100%, 0);
  423. -webkit-transform: translate(-100%, 0);
  424. transform: translate(-100%, 0);
  425. -moz-transform: translate3d(-100%, 0, 0);
  426. -ms-transform: translate3d(-100%, 0, 0);
  427. -webkit-transform: translate3d(-100%, 0, 0);
  428. transform: translate3d(-100%, 0, 0)
  429. }
  430. 100% {
  431. -moz-transform: translate(0, 0);
  432. -ms-transform: translate(0, 0);
  433. -webkit-transform: translate(0, 0);
  434. transform: translate(0, 0);
  435. -moz-transform: translate3d(0, 0, 0);
  436. -ms-transform: translate3d(0, 0, 0);
  437. -webkit-transform: translate3d(0, 0, 0);
  438. transform: translate3d(0, 0, 0)
  439. }
  440. }
  441. @-moz-keyframes load-bar-right-in {
  442. 0% {
  443. -moz-transform: translate(-100%, 0);
  444. -ms-transform: translate(-100%, 0);
  445. -webkit-transform: translate(-100%, 0);
  446. transform: translate(-100%, 0);
  447. -moz-transform: translate3d(-100%, 0, 0);
  448. -ms-transform: translate3d(-100%, 0, 0);
  449. -webkit-transform: translate3d(-100%, 0, 0);
  450. transform: translate3d(-100%, 0, 0)
  451. }
  452. 100% {
  453. -moz-transform: translate(0, 0);
  454. -ms-transform: translate(0, 0);
  455. -webkit-transform: translate(0, 0);
  456. transform: translate(0, 0);
  457. -moz-transform: translate3d(0, 0, 0);
  458. -ms-transform: translate3d(0, 0, 0);
  459. -webkit-transform: translate3d(0, 0, 0);
  460. transform: translate3d(0, 0, 0)
  461. }
  462. }
  463. @keyframes load-bar-right-in {
  464. 0% {
  465. -moz-transform: translate(-100%, 0);
  466. -ms-transform: translate(-100%, 0);
  467. -webkit-transform: translate(-100%, 0);
  468. transform: translate(-100%, 0);
  469. -moz-transform: translate3d(-100%, 0, 0);
  470. -ms-transform: translate3d(-100%, 0, 0);
  471. -webkit-transform: translate3d(-100%, 0, 0);
  472. transform: translate3d(-100%, 0, 0)
  473. }
  474. 100% {
  475. -moz-transform: translate(0, 0);
  476. -ms-transform: translate(0, 0);
  477. -webkit-transform: translate(0, 0);
  478. transform: translate(0, 0);
  479. -moz-transform: translate3d(0, 0, 0);
  480. -ms-transform: translate3d(0, 0, 0);
  481. -webkit-transform: translate3d(0, 0, 0);
  482. transform: translate3d(0, 0, 0)
  483. }
  484. }
  485. .mobile .load-bar.top {
  486. top: 46px
  487. }
  488. @media (min-height: 650px) {
  489. .mobile .load-bar.top {
  490. top: 64px
  491. }
  492. }
  493. @media (min-width: 360px) and (min-height: 450px) {
  494. .load-bar.top {
  495. top: 64px
  496. }
  497. }
  498. @media (min-width: 360px) and (min-height: 450px) and (min-width: 1024px) and (min-height: 600px) {
  499. .load-bar.top {
  500. top: 110px
  501. }
  502. }
  503. @media (min-width: 1024px) and (min-height: 450px) and (max-height: 600px) {
  504. .load-bar.top {
  505. top: 69px
  506. }
  507. }
  508. @media (min-width: 1024px) and (min-height: 450px) and (max-height: 600px) and (min-width: 1024px) and (min-height: 600px) {
  509. .load-bar.top {
  510. top: 115px
  511. }
  512. }
  513. @media (min-width: 1024px) and (min-height: 750px) {
  514. .load-bar.top {
  515. top: 80px
  516. }
  517. }
  518. @media (min-width: 1024px) and (min-height: 750px) and (min-width: 1024px) and (min-height: 600px) {
  519. .load-bar.top {
  520. top: 126px
  521. }
  522. }
  523. .main {
  524. padding-top: 64px
  525. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!