Progress Bar

Add progress bar to your widget.

Example

Code

    <div class="textwidget custom-html-widget"><div class="progress-wrapper" style="padding:0;">
        <div class="progress-info">
        <div class="progress-label">
        <span id="yearprogress_yearname"></span>
        </div>
        <div id="yearprogress_text_container" class="progress-percentage">
        <span id="yearprogress_progresstext"></span>
        <span id="yearprogress_progresstext_full"></span>
        </div>
        </div>
        <div class="progress">
        <div id="yearprogress_progressbar" class="progress-bar bg-primary" style=""></div>
        </div>
        </div>
        <script no-pjax>
        function yearprogress_refresh(){
            let year = new Date().getFullYear();
            $("#yearprogress_yearname").text(year);
            let from = new Date(year, 0, 1, 0, 0, 0);
            let to = new Date(year, 11, 31, 23, 59, 59);
            let now = new Date();
            let progress = ((now - from) / (to - from + 1) * 100).toFixed(7);
            let progressshort = ((now - from) / (to - from + 1) * 100).toFixed(2);
        $("#yearprogress_progresstext").text(progressshort + "%");
        $("#yearprogress_progresstext_full").text(progress + "%");
            $("#yearprogress_progressbar").css("width" , progress + "%");
        }
            yearprogress_refresh();
            if (typeof(yearProgressIntervalHasSet) == "undefined"){
            var yearProgressIntervalHasSet = true;
            setInterval(function(){yearprogress_refresh();},500);
        }
        </script>
        <style>
        #yearprogress_text_container {
            width: 100%;
            height: 22px;
            overflow: hidden;
            user-select: none;
        }
        #yearprogress_text_container > span {
            transition:all .3s ease;
            display: block;
        }
        #yearprogress_text_container:hover > span {
            transform: translateY(-20px);
        }
        </style></div>

Ref

https://solstice23.top/

Author: Xuan
Copyright: CC BY-NC-SA 4.0
No Comments

Send Comment Edit Comment


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
Previous