js动态加载css（页面加载完成后执行JS的5种方式）

一、前言

我们经常在网页上 ，游戏界面加载时会看到加载进度条的效果，我们往往会以为这些加载进度条的效果，很难实现。

今天教大家JS+CSS结合做简单一个加载进度条的效果。

二、项目准备

软件：HBuilderX。

三、项目实现

1. body 创建2个div，外部div添加id"progress"属性， 添加 id属性 。

1. "progress">
2. "progress-bar">

2.设置progress CSS样式。

设置宽度，高度，边框圆角，超过溢出处理，边框颜色等等属性。

1. #progress{
2. width:100%;
3. height:30px;
4. position:relative;
5. background-color:#ddd;
6. border-radius:10px;
7. overflow:hidden;
8. }

3.设置progress-bar CSS样式。

设置宽度，高度，行高，文字颜色，背景颜色等等属性。

1. #progress-bar{
2. background-color:#d9534f;
3. width:10px;
4. height:30px;
5. line-height:30px;
6. position:absolute;
7. text-align:center;
8. color:white;
9. background-image:linear-gradient(45deg,rgba(255,255,255,.15)25%,transparent25%,transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,transparent75%,transparent);
10. background-size:40px40px;
11. }

4. 设置 创建两个按钮，添加点击事件。

1. "start()">开始进度

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *