CodemySite_Web development

  N progress.js is an alternate way to indicate the loading processing. The progress bar can animate with custom time and animation styles. Official site How to use it? Step1: import CSS and js files from npm or CDN $ npm install --save nprogress or <link rel=”stylesheet” href=” https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css "/> <script src=” https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js "></script> Step2: set a container in HTML Step3: js fire up with  NProgress.start() and end the process with  NProgress.done() ; Documents:(Advanced use) Percentages : To set a progress percentage, call  .set(n) , where  n  is a number between  0..1 . NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() Incrementing : To increment the progress bar, just use  .inc() . This increments it with a random amount. This will never get to...

 As we know the video and audio player is the part of HTML5. With "controls" attribute, it's automatically adding the modern player interface according to different browsers.  But For leaning and custom more advanced functional player, it's good to do it with Javascript to understand how the events going on. Features: video api video.play() & video.pause() progress custom timestamp calculating Github code HTML link all the needed styles.  the range.css is from css tricks the play and stop icon are from font-awesome video tag with a poster to show the image default the controls have four parts,play button,stop button, progress bar and timestamp. CSS the screen is the audio player with border on the top the four parts in the controls inline display. the button without border for small screen setup JS select all the DOMs when click the video,toggle the status of videoo when pause and play the video,update the icon in the bar and change the progress  click event on ...

demo1  进度条-单纯添加遮罩  add shade for seconds code below: html The shade is a div named loading which is hide when page is loading. css  Then content of shade is a gif image linked in background. js After 3 seconds, the shade section fadeout so that the main container of page show up. demo2 根据内容加载的进度条 progress according to content html css js When the event status is complete, the shade fades out. The knowledge reference: 通过加载状态事件制作进度条 document.onreadystatechange  页面加载状态改变时的事件 document.readyState  返回当前文档的状态 1.uninitialized 还未开始载入 2.loading 载入中 3.interactive 已加载，文档与用户可以开始交互 4.complete 载入完成 demo3 css3进度条小动画  css3 animation progress html  Each strip is a tag <i>. css1  Transform makes the tag<i> shorter and animate the load animation. css2  Each <i> delay 0.1s one by one. js demo4 定位在头部的进度 progress at the top page css html+js In the body, execu...

Nowadays, bootstrap is kind of basic skill to be a front-end webdeveloper. But how to make it upgrade is the progressing road on. Here I will mention about the bootstrap progress functions. Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We use the  .progress  as a wrapper to indicate the max value of the progress bar. We use the inner  .progress-bar  to indicate the progress so far. The  .progress-bar  requires an inline style, utility class, or custom CSS to set their width. The  .progress-bar  also requires some  role  and  aria  attributes to make it accessible. More example of bootstrap progress. The demo Code: According to the bootstrap DOM, I build the HTML below. Every progress should be classed progress and the child bar for progress-bar,which is based on bootstrap. In this demo,we should link the Bootstrap,Awesome and customer css file. At...