前言

这里分享本站使用的插件或者扩展,使用插件部分需要加载静态资源,可能会网站加载速度变慢,请根据情况使用。黑暗模式可能没有适配,请自行修改样式文件来适配。

选项页

描述

在使用如果有选项页或者导航的需求,可以使用选项页。Fluid 使用了 Bootstrap 和 Jquery 框架,这项可能直接使用 Bootstrap 的布局,不需要引入相关静态资源。

代码和使用

<div class="row">
    <div class="col-md-4 col-sm-6 jQueryEqualHeight3">
        <div class="card">
            <img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/9b323e9549d67ec8a75fbc14b9cd0e237ccce8de.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">🚀 随便说说</h4>
                <p class="card-text">基于 Artitalk,这里是我的碎碎念,日常一些吐槽和感慨也会放到这个垃圾桶里。</p>
                <a href="/note/say" class="btn btn-primary">进入页面</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 jQueryEqualHeight3">
        <div class="card">
            <img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/debug.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">🚧 更新计划</h4>
                <p class="card-text">这里记录一些博客、主站和一些相关网站的更新计划、内容和记录一些学习的知识。</p>
                <a href="/note/update" class="btn btn-primary">进入页面</a>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 jQueryEqualHeight3">
        <div class="card">
            <img class="card-img-top" src="https://i.vince.pub/blog-file/photo/note/bed6d90f1b2f62b817e17029a7261311a23231ec.png" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">📄 常用内容</h4>
                <p class="card-text">这里记录一些网站使用到的插件的使用说明,和一些我经常使用到的链接。</p>
                <a href="/note/more" class="btn btn-primary">进入页面</a>
            </div>
        </div>
    </div>
</div>

在 HTML 或者 MD 文件中添加代码即可,具体效果查看演示。

演示

介绍卡片

描述

一个超酷的介绍卡片,具体来源为 jQuery 之家,这个卡片应该来源某个国外网站。我修改了样式文件,在移动端不会显示以及和主题样式文件的冲突。

代码与使用

使用代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/card/linkscard.css">
 <div class="linkscard">
     <div class="postcard green">
         <div class="additional">
             <div class="user-card">
                 <div class="level center">
                     <i class="iconfont icon-youhailaji-feijiuxiaojiadian"></i> Vince's Blog
                 </div>
                 <div class="points center">
                     16 POSTS
                 </div>
                 <img src="https://cdn.vince.pub/blog-file/photo/i.jpg" width="110" height="110" role="img" aria-labelledby="title desc" class="center">
             </div>
             <div class="more-info">
                 <h1>Vince Ying</h1>
                 <div class="coords">
                     <span>Bad code</span>
                     <span>Joined Apr 2020</span>
                 </div>
                 <div class="coords">
                     <span>Just do it later</span>
                     <span>Fujian, China</span>
                 </div>
                 <div class="stats">
                     <div>
                         <div class="title">友链</div>
                         <div class="value">10</div>
                     </div>
                     <div>
                         <div class="title">文章</div>
                         <div class="value">16</div>
                     </div>
                     <div>
                         <div class="title">懒惰</div>
                         <div class="value infinity"></div>
                     </div>
                     <div>
                         <div class="title">学习</div>
                         <div class="value infinity"></div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="general">
             <h1>Vince</h1>
             <p>欢迎你访问本站,感谢关注,如果你想要交换友链,请通过以下方式。佛系网站,访客也不多,主要为了记录一些东西。
             </p>
             <span class="more">上次更新:2020/06/26</span>
         </div>
     </div>
 </div>

CSS 引入文件

/*---Links Card---*/

@media screen and (max-width: 767px) {
    .linkscard {
        display: none
    }
}

@media screen and (min-width: 767px) {
    .linkscard {
        margin: 0 auto;
        width: 500px;
    }
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.postcard {
    width: 450px;
    height: 250px;
    background-color: #fff;
    background: linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin: 1.5rem;
}

.postcard h1 {
    text-align: center;
}

.postcard .additional {
    position: absolute;
    width: 150px;
    height: 100%;
    background: linear-gradient(#dE685E, #EE786E);
    transition: width 0.4s;
    overflow: hidden;
    z-index: 2;
}

.postcard.green .additional {
    background: linear-gradient(#92bCa6, #A2CCB6);
}

.postcard:hover .additional {
    width: 100%;
    border-radius: 0 5px 5px 0;
}

.postcard .additional .user-card {
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
}

.postcard .additional .user-card::after {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    right: -2px;
    height: 80%;
    border-left: 2px solid rgba(0, 0, 0, 0.025);
    */
}

.postcard .additional .user-card .level,
.postcard .additional .user-card .points {
    top: 15%;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.15);
    padding: 0.125rem 0.75rem;
    border-radius: 100px;
    white-space: nowrap;
}

.postcard .additional .user-card .points {
    top: 85%;
}

.postcard .additional .user-card svg {
    top: 50%;
}

.postcard .additional .more-info {
    width: 300px;
    float: left;
    position: absolute;
    left: 150px;
    height: 100%;
}

.postcard .additional .more-info h1 {
    color: #fff;
    margin-bottom: 0;
}

.postcard.green .additional .more-info h1 {
    color: #224C36;
}

.postcard .additional .coords {
    margin: 0 1rem;
    color: #fff;
    font-size: 1rem;
}

.postcard.green .additional .coords {
    color: #325C46;
}

.postcard .additional .coords span+span {
    float: right;
}

.postcard .additional .stats {
    font-size: 2rem;
    display: flex;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    top: auto;
    color: #fff;
}

.postcard.green .additional .stats {
    color: #325C46;
}

.postcard .additional .stats>div {
    flex: 1;
    text-align: center;
}

.postcard .additional .stats i {
    display: block;
}

.postcard .additional .stats div.title {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.postcard .additional .stats div.value {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
}

.postcard .additional .stats div.value.infinity {
    font-size: 2.5rem;
}

.postcard .general {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    padding: 1rem;
    padding-top: 0;
}

.postcard .general .more {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.9em;
}

在想要的地方中添加代码即可,具体效果查看演示。

演示

请使用 PC 端跳转到 友情链接 查看。

CDN

https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/card/linkscard.css

分页栏

描述

来源 GitHub, 我觉得这个分页栏的格式和这个主题还不算太不搭配。

代码和使用

使用示例代码

<div class="content">
     <div class="ah-tab-wrapper">
         <div class="ah-tab">
             <a class="ah-tab-item" data-ah-tab-active="true" href="">更新日志及部署状态</a>
             <a class="ah-tab-item" href="">本站使用的一些服务</a>
             <a class="ah-tab-item" href="">相关版权</a>
             <a class="ah-tab-item" href="">本站节点信息</a>
             <a class="ah-tab-item" href="">移动端页面预览</a>
         </div>
     </div>
     <div class="ah-tab-content-wrapper">
         <div class="ah-tab-content" data-ah-tab-active="true">
             <img src="https://cdn.vince.pub/blog-file/photo/68747470733a2f2f6170692e6e65746c6966792e636f6d2f6170692f76312f6261646765732f33356661376434392d306333322d343766382d623839302d6365333235356336373364652f6465706c6f792d737461747573.svg" alt="badge1" /></a>
             <img src="https://cdn.vince.pub/blog-file/photo/badge1.svg" alt="badge1" /></a>
             <img src="https://cdn.vince.pub/blog-file/photo/badge2.svg" alt="badge2" /></a>
             <h1> </h1>
             <li>网站整体建设开发(2020/4/4)</li>
             <li>网站插件部署(2020/4/5)</li>
             <li>网站关于页面完善(2020/4/5)</li>
             <li>一些错误更正(2020/4/6)</li>
             <li>jsdelivr 使用参考 (2020/4/6)</li>
             <li>友链页面 (2020/4/7)</li>
             <li>视频播放插件 (2020/4/7)</li>
             <li>关闭分类页,打开归档页面(2020/4/7)</li>
             <li>更换评论系统为 valine ,创建留言页面(2020/4/7)</li>
             <li>顶部任务栏图标(2020/4/8)</li>
             <li>中英文规范与博客版本更新(2020/4/10)</li>
             <li>加密插件(2020/4/10)</li>
             <li>统计服务及内容管理页面(2020/4/10)</li>
             <li>valine 邮箱提醒(2020/4/10)</li>
             <li>GitHub Actions 部署(2020/5/9)</li>
             <li>更新 footer (2020/5/10)</li>
             <li>移动一言与运行时间到关于页面(2020/5/10)</li>
             <li>更换 CDN (2020/5/11)</li>
             <li>整合关于页面(2020/5/21)</li>
             <li>引入 Icheck-material(2020/5/22)</li>
             <li>友链界面重新整合(2020/5/24)</li>
             <li>优化菜单选项及加入更多页面(2020/5/24)</li>
             <li>多节点部署(2020/5/26)</li>
         </div>
         <div class="ah-tab-content">
             <strong>以下为本站所使用程序及插件</strong>
             <h2> </h2>
             <li><strong><a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="noopener">Fluid</a></strong></li>
             <li><strong><a href="https://www.jsdelivr.com" target="_blank" rel="noopener">JSDelivr</a></strong></li>
             <li><strong><a href="https://hitokoto.cn/" target="_blank" rel="noopener">Hitokoto</a></strong></li>
             <li><strong><a href="https://valine.js.org/" target="_blank" rel="noopener">Valine</a></strong></li>
             <li><strong><a href="https://hexo.io/" target="_blank" rel="noopener">hexo</a></strong></li>
             <li><strong><a href="https://github.com/jaredly/hexo-admin" target="_blank" rel="noopener">Hexo-admin</a></strong></li>
             <li><strong><a href="https://github.com/rozbo/hexo-abbrlink" target="_blank" rel="noopener">Hexo-abbrlink</a></strong></li>
             <li><strong><a href="https://github.com/MikeCoder/hexo-blog-encrypt" target="_blank" rel="noopener">Hexo-blog-encrypt</a></strong></li>
             <li><strong><a href="https://github.com/netcan/hexo-generator-index-pin-top" target="_blank" rel="noopener">Hexo-generator-index-pin-top</a></strong></li>
             <li><strong><a href="https://github.com/MoePlayer/hexo-tag-dplayer" target="_blank" rel="noopener">Hexo-tag-dplayer</a></strong></li>
             <li><strong><a href="https://github.com/killia15/ProgressCircle" target="_blank" rel="noopener">ProgressCircle</a></strong></li>
             <li><strong><a href="https://github.com/bantikyan/icheck-material/" target="_blank" rel="noopener">Icheck-material</a></strong></li>
             <li><strong><a href="https://github.com/mohammad-hammal/bootsrap4-buttons-extended" target="_blank" rel="noopener">bootsrap4-buttons-extended</a></strong></li>
             <li><strong><a href="https://github.com/vinceying/Hexo-Action-TencentCloudBase" target="_blank" rel="noopener">Hexo-Action-TencentCloudBase</a></strong></li>
         </div>
         <div class="ah-tab-content">
             <li>网站内容使用 CC BY-SA 3.0 协议,除特别标注外,均可注明出处转载。Fluid 使用 MIT 协议,我会遵守相关协议。网站图片部分来源于网络,如有侵权,非常抱歉,请通过上方电子邮件按钮联系我,收到后我将尽快删除。</li>
         </div>
         <div class="ah-tab-content">
             <strong>以下为本站的节点信息</strong>
             <h2> </h2>
             <li><strong><a href="https://netlify.vince.pub/" target="_blank" rel="noopener">Netlify</a></strong></li>
             <li><strong><a href="https://gh.vince.pub/" target="_blank" rel="noopener">Github</a></strong></li>
             <li><strong><a href="https://coding.vince.pub/" target="_blank" rel="noopener">Coding</a></strong></li>
             <li><strong><a href="https://vercel.vince.pub/" target="_blank" rel="noopener">Vercel</a></strong></li>
         </div>
         <div class="ah-tab-content">
             <iframe src="https://i.vince.pub/" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>
         </div>
     </div>
 </div>
 
 <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.js"></script>
 <script>
     $(function() {
         $('.ah-tab-wrapper').horizontalmenu({
             itemClick: function(item) {
                 $('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
                 $('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
                 return false; //if this finction return true then will be executed http request
             }
         });
     });
 </script>

CSS 引入文件

.ah-tab-wrapper {
    position: relative;
}

.ah-tab-wrapper *,
.ah-tab-wrapper *:before,
.ah-tab-wrapper *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ah-tab {
    border-bottom: 1px solid #ebebeb;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: -0.3em;
}

.ah-tab::before,
.ah-tab::after {
    bottom: 0;
    content: "";
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 1;
    transition: opacity .3s;
}

.ah-tab::before {
    left: -100%;
    width: 30px;
    background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    background: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
}

.ah-tab::after {
    right: 100%;
    width: 80px;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}

.ah-tab-overflow-left::before {
    opacity: 1;
    left: 0;
}

.ah-tab-overflow-right::after {
    opacity: 1;
    right: 0;
}

.ah-tab-overflow-wrapper {
    position: absolute;
    width: 43px;
    height: 100%;
    right: 100%;
    opacity: 0;
    top: 0;
    z-index: 1;
    text-align: center;
}

.ah-tab-overflow-wrapper[data-ah-tab-active="true"] {
    right: 0;
    opacity: 1;
    transition: opacity .3s;
}

.ah-tab-overflow-menu {
    background: transparent url(https://cdn.vince.pub/blog-file/photo/list.svg) center center no-repeat;
    background-size: 18px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    transition: opacity .3s;
    opacity: .7;
}

.ah-tab-overflow-wrapper:hover .ah-tab-overflow-menu {
    opacity: 1;
}

.ah-tab-overflow-list {
    position: absolute;
    top: -1000%;
    right: 0;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);
    list-style: none;
    transition: opacity .3s;
    opacity: 0;
    max-width: 290px;
}

.ah-tab-overflow-list::after {
    content: " ";
    display: block;
    position: absolute;
    top: -14px;
    right: 14px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}

.ah-tab-overflow-list::before {
    content: " ";
    display: block;
    position: absolute;
    top: -16px;
    right: 13px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #cdcdcd;
}

.ah-tab-overflow-wrapper:hover .ah-tab-overflow-list {
    top: 99%;
    padding: 10px 0;
    opacity: 1;
}

.ah-tab-overflow-list:hover {
    display: block;
}

.ah-tab-item {
    color: #8b8b8b;
    cursor: pointer;
    display: inline-block;
    letter-spacing: normal;
    transition: all .3s;
    text-decoration: none;
    font-size: 16px;
}

.ah-tab>.ah-tab-item {
    border-bottom: 3px solid transparent;
    margin-right: 30px;
    padding: 15px 0;
}

@media (min-width: 768px) {
    .ah-tab>.ah-tab-item {
        margin-right: 50px;
    }
}

.ah-tab-item[data-ah-tab-active="true"] {
    color: #215393;
}

.ah-tab>.ah-tab-item:hover {
    border-bottom: 3px solid #8b8b8b;
}

.ah-tab>.ah-tab-item[data-ah-tab-active="true"] {
    border-bottom-color: #215393;
}

.ah-tab-overflow-list>.ah-tab-item {
    border-left: 3px solid transparent;
    display: block;
    overflow: hidden;
    padding: 10px 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ah-tab-overflow-list>.ah-tab-item:hover {
    border-left-color: #8b8b8b;
}

.ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active="true"] {
    border-left-color: #215393;
}

.ah-tab-content-wrapper {
    margin: 30px 0;
}

.ah-tab-content {
    display: none;
    padding: 30px;
    border: 1px solid #ebebeb;
}

.ah-tab-content[data-ah-tab-active="true"] {
    display: block;
}

JS 引入文件

(function($) {
    $.fn.horizontalmenu = function(option) {
        var setting = {
            itemClick: function(sender) {
                return true;
            }
        };

        if (option) $.extend(setting, option);

        var isOverflown = function(selector) {
            var element = $(selector)[0];
            return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
        }

        var adaptiveTab = function(tabWrapper) {
            var tab = $(tabWrapper).find('.ah-tab');
            var tabOvorflowList = $(tabWrapper).find('.ah-tab-overflow-wrapper');
            var isOver = isOverflown(tab);
            if (isOver) {
                tab.addClass('ah-tab-overflow-right');
            } else {
                tab.removeClass('ah-tab-overflow-right');
            }
            tabOvorflowList.attr('data-ah-tab-active', isOver);
            var items = tab.find('.ah-tab-item');
            var activeItem = tab.find('.ah-tab-item[data-ah-tab-active="true"]');

            var activeIndex = activeItem.index();
            var marginLeft = 0,
                marginRight = 0;

            if (isOver) {
                // console.clear()
                for (var i = 0; i < items.length; i++) {
                    var val = items.eq(i).width() + parseInt(items.eq(i).css('margin-right'));
                    if (i < activeIndex) {
                        marginLeft += val;
                        continue;
                    }
                    marginRight += val;
                }
                console.log(marginRight);
                if (marginLeft + activeItem.width() + 80 > $(tab).width()) {
                    marginLeft *= -1;
                    if (activeIndex) {


                        var dW = $(tab).width() - marginRight - 80;
                        marginLeft += parseInt(activeItem.css('margin-right'));
                        console.log(dW);
                        if (dW > 0)
                            marginLeft += dW;
                        // 胁褘褔懈褋谢懈褌褜 褕懈褉懈薪褍 锌芯褋谢械 胁褘写械谢械薪薪芯谐芯 褝谢械屑械薪褌邪 薪邪蟹芯胁械屑 械谐芯 dA. dW = 械褋谢懈 tab.width() - dA > 0, 褌芯 marginLeft -= dW 
                        tab.addClass('ah-tab-overflow-left');
                    }
                } else {
                    marginLeft = 0;
                    tab.removeClass('ah-tab-overflow-left');
                }
            } else {
                tab.removeClass('ah-tab-overflow-left');
            }
            items.css('transform', 'translateX(' + marginLeft + 'px)');
        }

        var initialize = function(wrapper) {
            if (wrapper.find('.ah-tab-overflow-wrapper').length) return false;

            var items = wrapper.find('.ah-tab-item');
            items.bind('click', function() {
                var isContinue = setting.itemClick($(this));
                if (!isContinue) {
                    var index = $(this).index();
                    var w = $(this).closest('.ah-tab-wrapper');
                    w.find('.ah-tab-item').removeAttr('data-ah-tab-active');
                    w.find('.ah-tab .ah-tab-item').eq(index).attr('data-ah-tab-active', 'true');
                    w.find('.ah-tab-overflow-wrapper .ah-tab-item').eq(index).attr('data-ah-tab-active', 'true');
                    adaptiveTab(w);
                }
                return isContinue;
            });

            $('<div>', {
                class: 'ah-tab-overflow-wrapper',
                append: $('<button>', {
                    type: 'menu',
                    class: 'ah-tab-overflow-menu'
                }).add($('<div>', {
                    class: 'ah-tab-overflow-list',
                    append: items.clone(true, true).removeAttr('style')
                }))
            }).appendTo(wrapper);

            adaptiveTab(wrapper);

            var resizeStabilizer = undefined;
            $(window).bind('resize', function() {
                if (resizeStabilizer) clearTimeout(resizeStabilizer);
                resizeStabilizer = setTimeout(function() {
                    adaptiveTab(wrapper);
                }, 20);
            });
        }

        return this.each(function() {
            initialize($(this));
        });
    };
})(jQuery);

在想要的地方中添加代码即可,具体效果查看演示。

演示

CDN

https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.js
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/tabs/tabs.css

基于 SVG 的状态仪表盘

描述

来源 GitHub, 我修改了样式文件,适配了移动端。

代码记使用

使用代码

<div id="html-partial">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.css">
    <div id="percent">
        <div class="circlechart" data-percentage="-50">Study</div>
        <div class="circlechart" data-percentage="65">Blog</div>
        <div class="circlechart" data-percentage="30">Website</div>
    </div>
    <script>
        window.jQuery || document.write('<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"><\/script>')
    </script>
    <script src="https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.js"></script>
    <script>
        $('.circlechart').circlechart(); // Initialization
    </script>
</div>

CSS 引入文件

/**
 * Inspiration for this project found at:
 * https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround.
 */

.circle-chart {
    width: 150px;
    height: 150px;
}

.circle-chart__circle {
    stroke: #00acc1;
    stroke-width: 2;
    stroke-linecap: square;
    fill: none;
    animation: circle-chart-fill 2s reverse;
    /* 1 */
    transform: rotate(-90deg);
    /* 2, 3 */
    transform-origin: center;
    /* 4 */
}


/**
   * 1. Rotate by -90 degree to make the starting point of the
   *    stroke the top of the circle.
   * 2. Scaling mirrors the circle to make the stroke move right
   *    to mark a positive chart value.
   * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
   *    and Edge, use the transform attribute directly on the SVG element as a
   * .  workaround.
   */

.circle-chart__circle--negative {
    transform: rotate(-90deg) scale(1, -1);
    /* 1, 2, 3 */
}

.circle-chart__background {
    stroke: #efefef;
    stroke-width: 2;
    fill: none;
}

.circle-chart__info {
    animation: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em);
}

.circle-chart__percent {
    alignment-baseline: central;
    text-anchor: middle;
    font-size: 8px;
}

.circle-chart__subline {
    alignment-baseline: central;
    text-anchor: middle;
    font-size: 3px;
}

.success-stroke {
    stroke: #00C851;
}

.warning-stroke {
    stroke: #ffbb33;
}

.danger-stroke {
    stroke: #ff4444;
}

@keyframes circle-chart-fill {
    to {
        stroke-dasharray: 0 100;
    }
}

@keyframes circle-chart-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 960px) {
    #percent {
        width: 400px;
        height: 400px;
        margin: 50px auto;
    }
}

@media screen and (min-width: 960px) {
    #percent {
        width: 600px;
        height: 200px;
        margin: 50px auto;
    }
}

.circlechart {
    float: left;
    padding: 20px;
}

.html-partial {
    margin: 0 auto;
}

JS 引入文件

function makesvg(percentage, inner_text = "") {

    var abs_percentage = Math.abs(percentage).toString();
    var percentage_str = percentage.toString();
    var classes = ""

    if (percentage < 0) {
        classes = "danger-stroke circle-chart__circle--negative";
    } else if (percentage > 0 && percentage <= 30) {
        classes = "warning-stroke";
    } else {
        classes = "success-stroke";
    }

    var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">' +
        '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />' +
        '<circle class="circle-chart__circle ' + classes + '"' +
        'stroke-dasharray="' + abs_percentage + ',100"    cx="16.9" cy="16.9" r="15.9" />' +
        '<g class="circle-chart__info">' +
        '   <text class="circle-chart__percent" x="17.9" y="15.5">' + percentage_str + '%</text>';

    if (inner_text) {
        svg += '<text class="circle-chart__subline" x="16.91549431" y="22">' + inner_text + '</text>'
    }

    svg += ' </g></svg>';

    return svg
}

(function($) {

    $.fn.circlechart = function() {
        this.each(function() {
            var percentage = $(this).data("percentage");
            var inner_text = $(this).text();
            $(this).html(makesvg(percentage, inner_text));
        });
        return this;
    };

}(jQuery));

在想要的地方中添加代码即可,具体效果查看演示。

演示

CDN

https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.css
https://cdn.jsdelivr.net/gh/vinceying/blog-file@master/share/circlechart/circlechart.js